Installation

How to install and set up Fasla 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 the @smicolon/cli package. It takes two steps.

1. Initialize Fasla, once per project. This writes components.json, which every add reads:

npx @smicolon/cli init

2. Add a component:

npx @smicolon/cli add button

Or add several at once:

npx @smicolon/cli add card input badge

List everything the registry offers:

npx @smicolon/cli list

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

Map the semantic tokens into your Tailwind theme. The package exports the whole set, already wrapped so that opacity modifiers keep working:

// tailwind.config.ts
import { tailwindSemanticColors } from "@smicolon/fasla-ui/tokens"

module.exports = {
  darkMode: "class",
  theme: {
    extend: {
      colors: tailwindSemanticColors,
    },
  },
}

Then declare the matching CSS variables as full colours (hex or oklch) on :root and .dark. Mapping a token as a bare var(--primary) looks correct but silently drops Tailwind’s opacity modifiers — bg-primary/10 compiles to no rule at all. That is why the exported map wraps each token in color-mix().