Setup
How to install and start using LoveUI in your project.
Setting up LoveUI is quick and flexible.
You can install components with the LoveUI CLI for the fastest experience, or use the shadcn/ui CLI if your project already follows that workflow.
This guide walks you through what you need before installation and how to get components running in just a few commands.
Prerequisites
Before you begin, make sure your environment is ready:
- Node.js v18+
- A React project v18+
- shadcn/ui configured in CSS Variables mode
(Tailwind CSS must be set up and initialized)
If you haven’t set up shadcn/ui yet, do that first.
Follow their official setup guide to initialize Tailwind and the base components — LoveUI builds on that foundation.
LoveUI currently supports only the CSS Variables version of shadcn/ui.
Installing Components
You can install components using either the LoveUI CLI or the shadcn/ui CLI — both work the same way.
Each command adds the selected component’s code and dependencies directly to your project.
For example, to install the Gantt Chart component:
npx loveui add gantt
After running the command:
- The component files will be added to
@/components/love-ui/gantt/(or your configured components folder). - Any required dependencies will be installed automatically.
- You’ll see a confirmation message in your terminal when setup is complete.
Now you can import and use it right away:
import { GanttChart } from "@/components/love-ui/gantt"
export default function Example() {
return <GanttChart />
}