$lerpa init

Installation

Lerpa UI installs straight into your app — there is no runtime package to add. The lerpa-cli scaffolds a components/ui folder, a cnclass-merge utility, and your Tailwind v4 setup, then copies component source on demand.

Prerequisites

React 19 (and React DOM 19).
Tailwind CSS v4 configured in your project.
A React framework — Next.js 16 or Vite both work. Components are framework-agnostic .tsx files.
Node 20+ and a package manager (pnpm, npm, yarn, or bun).

1. Initialize

Run init once at the root of your project. It asks a few questions (package manager, CSS path, import aliases), writes a lerpa.json config, and creates a cnhelper if you don't have one.

❯pnpm dlx lerpa-cli init

Prefer another package manager? Use the matching runner:

❯npx lerpa-cli init

❯bunx lerpa-cli init

initis idempotent — re-running it only writes what's missing and prompts before overwriting your lerpa.json.

2. Add a component

Pull any component by its registry id. The CLI reads the shadcn-compatible registry and copies the actual source into components/ui — you own the file from then on.

❯pnpm dlx lerpa-cli add button

3. Import and use it

Import from your components alias and render. It's just your code now.

app/page.tsx

import { Button } from "@/components/ui/button";

export default function Page() {
  return <Button>Ship it →</Button>;
}

Manual / copy-paste install

Don't want the CLI? Every component is also browsable in the gallery, where you can copy the source directly. Because the registry is shadcn-compatible, the file layout and import conventions match what you already know — drop the file into components/ui, make sure your cn utility exists, and import it.

See Project structure for exactly where files land, and the CLI reference for every command and flag.