Installation

Project setup expected by the components in this library.

Components assume a React project with Tailwind CSS v3 and an @/ import alias pointing at your source directory.

1. Alias

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

2. The cn() helper

Many components import cn from @/lib/utils:

import { clsx } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs) {
  return twMerge(clsx(inputs));
}

npm install clsx tailwind-merge

3. Theme tokens

Some components use theme colours such as bg-background or text-muted-foreground. A component page lists what it needs under Setup required; nothing is ever added to your tailwind.config automatically.

4. Copy the component

Each component page shows the install command for its dependencies and the real source of every file, with the path it should be saved to.