Components
- Accordion
- Alert
- Alert Dialog
- Autocomplete
- Avatar
- Badge
- Breadcrumb
- Button
- Card
- Checkbox
- Checkbox Group
- Collapsible
- Combobox
- Code Block
- Dialog
- Empty
- Field
- Fieldset
- Form
- Frame
- Group
- Input
- Label
- Menu
- Meter
- Number Field
- Pagination
- Popover
- Preview Card
- Progress
- Radio Group
- Scroll Area
- Select
- Separator
- Sheet
- Skeleton
- Slider
- Switch
- Table
- Tabs
- Textarea
- Toast
- Gooey Toast
- Toggle
- Toggle Group
- Toolbar
- Tooltip
Styling
A guide to styling components with our color system.
Overview
LoveUI uses CSS variables for colors.
This keeps components consistent and easy to theme.
You can use the default palette or replace values with your own.
Installation
npx love-ui@latest add colors-zincThis adds the default color variables.
Extended Color Variables
LoveUI adds these extra variables for state-based UI (alerts, badges, and status):
--destructive-foreground: Foreground color for destructive actions--info: Information state color--info-foreground: Foreground color for information states--success: Success state color--success-foreground: Foreground color for success states--warning: Warning state color--warning-foreground: Foreground color for warning states
If you install with CLI, these are added automatically.