Installation

How to install and set up SMI-UI in your project.

Requirements

  • React 18 or later
  • Tailwind CSS 3.4 or later
  • TypeScript (recommended)

Using the CLI

The easiest way to add components is using our CLI:

Initialize SMI-UI in your project:

npx @smicolon/smi-ui init

Add components:

npx @smicolon/smi-ui add button

Add multiple components:

npx @smicolon/smi-ui add button card input badge

Manual Installation

You can also copy components directly from the source code.

1. Install dependencies:

npm install class-variance-authority clsx tailwind-merge framer-motion

2. Add the cn utility to your project:

// lib/utils.ts
import { type ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

3. Copy the component source code from each component page.

Tailwind Configuration

Make sure your Tailwind config includes the necessary colors and animations:

// tailwind.config.ts
module.exports = {
  darkMode: "class",
  theme: {
    extend: {
      colors: {
        border: "var(--border)",
        background: "var(--background)",
        foreground: "var(--foreground)",
        primary: {
          DEFAULT: "var(--primary)",
          foreground: "var(--primary-foreground)",
        },
        // ... other colors
      },
    },
  },
}