Get Started

Welcome to the LoveUI release. Everything in the library is built to drop into a modern React + Tailwind project without wrestling with design tokens or wiring.

Project checklist

LoveUI targets Tailwind CSS v4 running inside a React application (Next.js, Remix, Vite, or Expo Router work great). Make sure you have:

• Tailwind configured with the v4 preset
• TypeScript enabled
• A global CSS file where we can register LoveUI tokens (usually app/globals.css or src/styles.css)

Once those pieces are in place you can choose the install flow that fits your workflow.

Quick start (CLI)

Every component page surfaces a npx loveui command that copies the source, drops in dependencies, and syncs design tokens automatically. To pull the full primitive set in one shot:

Copynpx love-ui@latest add loveui

Run the command from the root of your project and the CLI will create the /components files, register styles, and install peer packages. You can rerun the same command as we ship updates—duplicate files are kept in sync.

Manual copy-paste

Prefer a lighter touch or want to audit changes before they land? Copy the code from the Code tab on any component or background page.

1. Locate the component on Components or Particles.
2. Create a matching file in your project, e.g. components/ui/button.tsx.
3. Paste the snippet and install any listed dependencies.
4. Import the component wherever you need it.

Manual installs require you to keep tokens updated (see the next section). You only have to do this once per project.

Styling and tokens

LoveUI exposes a token layer that mirrors shadcn/ui but extends it with our product design system. Drop the token block into your global CSS if you are copying files manually:

• --destructive-foreground for destructive outlines, menus, and error states
• --info / --info-foreground for notice banners and info toasts
• --success / --success-foreground for success badges and confirmations
• --warning / --warning-foreground for warning banners and destructive previews

Feel free to override any variable to match your own palette—the components respond instantly because every color, radius, and shadow is token-driven. If you use the CLI the CSS is injected for you, so you can just adjust values in your theme file.

Use it with LLMs

We’ve tuned the docs for AI workflows. The llms.txt sitemap keeps agents aware of the structure, and every page exposes a Copy Markdown button so you can hand complete instructions to your tooling.