# Registry
Install individual components as source code using the shadcn CLI.

Install individual components directly into your project instead of the entire package.

- Full control over the source code
- Smaller bundle size — only what you use
- Easy customization — modify components directly

## Prerequisites

- This installation guide is compatible with React and Vite-based plugins.

## Setup

### 1. Install Tailwind CSS v4

Follow the [Tailwind CSS Vite installation guide](https://tailwindcss.com/docs/installation/using-vite):

<PackageInstall pkg="tailwindcss @tailwindcss/vite" />

Add the Tailwind plugin to `vite.config.ts`:

```ts
import tailwindcss from "@tailwindcss/vite";

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

Create a CSS file (e.g., `src/styles/globals.css`):

```css
@import "tailwindcss";
```

Import it in your app entry (`src/main.tsx`):

```tsx
import "./styles/globals.css";
```

### 2. Add shadcn dependencies

<PackageInstall pkg="shadcn class-variance-authority clsx tailwind-merge lucide-react tw-animate-css" />

### 3. Configure path aliases

The installed components use `@/` imports (e.g. `import { cn } from "@/lib/utils"`). Configure the alias in three places:

**`tsconfig.json`** (shadcn CLI reads this to resolve install paths):

```json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}
```

**`tsconfig.app.json`** (TypeScript uses this for type checking):

Add to `compilerOptions`:

```json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}
```

**`vite.config.ts`** (Vite uses this for bundling):

```ts
import path from "path";

export default defineConfig({
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
});
```

### 4. Create `components.json`

Create `components.json` in your project root with the LottieFiles registry:

```json
{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "default",
  "rsc": false,
  "tsx": true,
  "tailwind": {
    "config": "",
    "css": "src/styles/globals.css",
    "baseColor": "neutral",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  },
  "iconLibrary": "lucide",
  "registries": {
    "@lottiefiles": "https://creator-plugins-ds.lottiefiles.com/r/{name}.json"
  }
}
```

### 5. Install the LottieFiles theme

```bash
npx shadcn@latest add @lottiefiles/theme
```

This sets up the LottieFiles design tokens — colors, typography scale, border radii, and font.

### 6. Install components

```bash
npx shadcn@latest add @lottiefiles/button
```

The utils and component dependencies are installed automatically.

Or install multiple components at once:

```bash
npx shadcn@latest add @lottiefiles/button @lottiefiles/input @lottiefiles/card
```

## Customization

Components are installed as source code. Modify them directly:

```tsx
// src/components/ui/button.tsx
const buttonVariants = cva("...", {
  variants: {
    variant: {
      default: "...",
      // Add your custom variant
      brand: "bg-purple-600 text-white hover:bg-purple-700",
    },
  },
});
```

## Updating components

### Preview changes

```bash
npx shadcn@latest add @lottiefiles/button --diff
```

This shows a diff of what would change without modifying any files.

### Apply the update

```bash
npx shadcn@latest add @lottiefiles/button --overwrite
```