Project structure

Lerpa UI follows the shadcn convention: components are real files in your repo, not an installed dependency. Here's where everything lands after you run init and add a few components.

Where files go

your-project/
├─ lerpa.json                 # CLI config (aliases, paths, package manager)
├─ src/
│  ├─ app/
│  │  └─ globals.css          # Tailwind v4 entry + design tokens
│  ├─ components/
│  │  └─ ui/                  # ← components land here
│  │     ├─ button.tsx
│  │     └─ area-chart-gradient.tsx
│  └─ lib/
│     └─ utils.ts             # ← cn() class-merge helper
└─ tailwind.config.ts

Key locations

components/ui

Every UI component the CLI adds. Configurable via the aliases.components field in lerpa.json (default @/components). Blocks land in components/blocks.

lib/utils.ts

The cn() helper that merges Tailwind classes with clsx + tailwind-merge. Created by init if missing; path set by aliases.utils.

globals.css

Your Tailwind v4 entry stylesheet, where the CSS-variable design tokens live. The CLI references it via tailwind.css.

lerpa.json

The CLI's config file at the project root. See Configuration for the full schema.

The cn helper

Components import a cnutility to compose Tailwind classes safely. If you don't already have one, init writes this:

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

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

Want to change where files land? Edit lerpa.json — the CLI resolves your aliases on every add.