Requirements

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

1. Install the base dependencies

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

2. Add the cn() helper

Create src/lib/utils.ts:

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

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

Or install it from the registry:

npx logic2b@latest add utils

3. Add the theme tokens

Copy the CSS variables from the Theming page into your global CSS file. Components reference tokens like bg-primary and text-muted-foreground; without them nothing will look right.

4. Add components

npx logic2b@latest add button

Or copy the source from any component page — every page has a Code tab with the full source.

Using an AI assistant

Every install block on this site has an Agent tab (and the theme studio a Prompt view) with a ready-to-paste prompt for Claude Code, Cursor or Copilot. The prompt bundles the commands above, a no-CLI fallback and a verification checklist, so the assistant can do the whole setup in one go. You can also start from /create: pick a theme, press Get Code and copy the prompt for a new or existing project.

Path aliases

Components import from @/lib/utils and @/components/ui/*. Configure the @ alias in your tsconfig.json and bundler to point at src/.