Spirre UI Library

Spirre is a modern UI component library built with Tailwind CSS, designed for AI-powered development with a focus on consistency and ease of use.

Installation

Run this to install all required dependencies:

npm i tailwindcss @tailwindcss/vite spireui

Setup

Add tailwindcss to your vite config

import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
  plugins: [tailwindcss(), react()],
});

Add to your CSS

Add these imports to your main CSS file:

@import url("spireui/styles.css");
@import "tailwindcss";
@plugin "spireui/tailwind";

Import in your components

import Sui from "spireui";

Usage

// Example button usage
<Sui.Button.Normal uiMain="primary" uiSize="md">
  Click Me
</Sui.Button.Normal>

// Example input usage
<Sui.Input.Normal
  uiMain="layer-2"
  uiSize="md"
  placeholder="Enter text..."
/>

Configuration

You can customize Spirre's appearance by configuring the Tailwind plugin:

@plugin "spireui/tailwind" {
  /* General */
  general__scale__: 1;

  /* Colors */
  colors__primary__: #3b82f6;
  colors__success__: #22c55e;
  colors__alert__: #ef4444;
  colors__warning__: #f59e0b;
  colors__info__: #3b82f6;
  colors__layer-1__: #1e293b;
  colors__layer-2__: #334155;

  /* Buttons */
  buttons__click-animation__: small-scale;
}