Registry

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:

npm install tailwindcss @tailwindcss/vite

Add the Tailwind plugin to vite.config.ts:

import tailwindcss from "@tailwindcss/vite";

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

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

@import "tailwindcss";

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

import "./styles/globals.css";

2. Add shadcn dependencies

npm install 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):

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

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

Add to compilerOptions:

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

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

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:

{
  "$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

npx shadcn@latest add @lottiefiles/theme

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

6. Install components

npx shadcn@latest add @lottiefiles/button

The utils and component dependencies are installed automatically.

Or install multiple components at once:

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

Customization

Components are installed as source code. Modify them directly:

// 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

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

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

Apply the update

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