Installation

Prerequisites

• React 18+ or 19
• Tailwind CSS v4
• TypeScript (recommended)

Setup

1. Initialize shadcn

If you haven't already, initialize shadcn in your project:

npx shadcn@latest init

2. Configure the Saturation registry

Add the Saturation registry to your components.json:

{
  "registries": {
    "@saturation": "https://ui.saturation.io/r"
  }
}

3. Install components

npx shadcn@latest add @saturation/button

This will install the component, its dependencies, and any required registry dependencies automatically.

Manual Installation

If you prefer to install components manually:

1. Copy the component source from registry/saturation/ui/
2. Install the required npm dependencies
3. Add the component to your components/ui/ directory
4. Ensure your lib/utils.ts exports the cn() function

Path Aliases

Saturation UI components use the @/ path alias. Ensure your tsconfig.json has:

{
  "compilerOptions": {
    "paths": {
      "@/*": ["./*"]
    }
  }
}