Installation

Prerequisites

• Node.js 18+
• A Next.js 14+ project with App Router
• Tailwind CSS v4
• TypeScript

Dependencies

Install the required dependencies:

pnpm add class-variance-authority clsx tailwind-merge lucide-react

Add the cn utility

Create lib/utils.ts:

import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";

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

Configure CSS Variables

Add the theme tokens to your globals.css. See the project source for the full set of CSS variables used for theming.

That's it!

You're ready to start copying components into your project. Browse the component docs in the sidebar to get started.