$lerpa --tutorial↳five steps · ~3 min✓ React 19·Tailwind v4·Next 16

Get startedin five steps

Lerpa UI installs straight into your project — no package to depend on. The CLI writes real, owned source files into components/ui, shadcn-compatible. Install the CLI, add a component, theme it, then point your AI agent at the MCP server.

Start the walkthrough →Browse components

Live registry · 1318 itemsMIT/copy-paste source/0 runtime deps

$lerpa --walkthrough↳ 6 steps· copy & run

From zero
to shipped.

Each step is one command you can copy and paste. No config to memorize — the CLI scaffolds components/ui, a cn utility, and your Tailwind v4 setup on the first run.

$lerpainit
Install the CLI
Run init once at the root of your app. It sets up components/ui, adds a cn class-merge utility, and wires up Tailwind v4. Built for React 19 and Next.js 16.
❯pnpm dlx lerpa-cli init
Already have a project? initis idempotent — it detects your framework and only writes what's missing.
$lerpaadd <id>
Add a component
Pull any component by id. The CLI reads the shadcn-compatible registry and copies the actual source into your project — you own the file, edit it freely.
❯pnpm dlx lerpa-cli add button
A few more ids to try:
❯pnpm dlx lerpa-cli add area-chart-gradient
❯pnpm dlx lerpa-cli add ai-chat-interface
03
$lerpaimport
Use it
The component lands at components/ui/button.tsx. Import it from the @/components/uialias 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>;
}
```
$lerpa--gallery
Browse the gallery
Not sure which id you need? The gallery renders every component live — hover, click, then copy the install line straight off the card.
1179+components
24animated charts
178+page blocks
16categories
Components →Page blocks →
$lerpa--theme
Theme it
Every token is a CSS variable. Open Theme Studio, pick an accent, background, and radius, and watch the whole app recolor live — then export the :root block into your globals.css.
Open Theme Studio →
$lerpa--mcp
Wire up AI agents (MCP)
The @lerpa/mcp-server is a Model Context Protocol server. Point Cursor or Claude Code at it and your agent can search the catalog and install components for you — no copy-paste round-trips.
❯npx -y @lerpa/mcp-server
Add it to your editor's MCP config as a stdio server — the agent gets search and add tools backed by the same live registry the CLI uses.

$lerpa --next↳ you're set up

That's it.
Now ship.

Six steps, one CLI. Pick components from the gallery, theme them in Theme Studio, and let your agent wire the rest through the MCP server.

— galleryBrowse 1179+ components →Every component, rendered live.— blocks178+ page blocks →Drop-in heroes, pricing, footers.— themeTheme Studio →Recolor everything, export the CSS.— a11yAccessibility →WCAG AA/AAA, axe-tested.

Get startedin five steps

From zeroto shipped.

Install the CLI

Add a component

Use it

Browse the gallery

Theme it

Wire up AI agents (MCP)

That's it.Now ship.

From zero
to shipped.

That's it.
Now ship.