Get Started

This guide shows the fastest path to using LoveUI in a React project.

LoveUI components are meant to live in your app. The CLI copies component code, installs required dependencies, and leaves you with files you can edit.

Project checklist

Before adding components, make sure your project has:

React.
Tailwind CSS v4.
A global stylesheet, such as app/globals.css.
A component import alias, such as @/components/ui.

If your app does not use the same import alias, you can still use LoveUI. Update the import paths after copying a component.

Install the base setup

Run the CLI from your project root:

npm

npx love-ui@latest add loveui

This installs the shared setup that most components expect. It may add CSS variables, utility helpers, and dependencies used by LoveUI components.

After installation, check the changed files before committing. The generated files are normal project files, so you can edit them.

Add a component

Add components one at a time:

npm

npx love-ui@latest add button

Replace button with the component name from the docs. For example, use dialog, select, tabs, or toast.

Each component page also includes a CLI command with the exact name to install.

Install manually

Manual setup is useful when you want to review every line before it enters your project.

Open a component page in the docs.
Copy the code from the Code tab.
Paste it into your project.
Install any listed dependencies.
Copy any required CSS variables.
Update import paths to match your app.

Use Styling when a component relies on shared colors or state tokens.

Choose your first components

For a basic product screen, start with:

Button for actions.
Input and Field for forms.
Dialog for focused tasks.
Table for structured data.
Toast for short feedback.

For a complete form, combine Form, Field, and the specific controls you need.

After setup

Read Component Guide to understand how the component docs are organized.

Read Accessibility before changing keyboard behavior, focus styles, labels, or validation messages.

If you want to contribute back to LoveUI, read the Contributing Guide.