Quickstart

The shortest path from zero to a rendered component. This assumes you already have a React 19 + Tailwind v4app (Next.js 16 or Vite). If not, see Installation first.

1. Initialize Lerpa UI

Run this once at the project root. It writes lerpa.json and a cn helper.

2. Add a component

Add the button to start. The source is copied into components/ui/button.tsx.

3. Import it

Import from the @/components/ui alias that init configured.

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

export default function Page() {
  return (
    <main className="grid min-h-screen place-items-center">
      <Button>Ship it →</Button>
    </main>
  );
}

4. Run your app

Start the dev server and you'll see the component rendered:

Next steps