Styling

Overview

LoveUI uses CSS variables for colors and Tailwind CSS for component classes.

CSS variables make the components easier to theme because the same token can be reused across buttons, alerts, badges, forms, popovers, and dark mode.

You can use the default palette, replace values with your own brand colors, or add more tokens for your app.

How styling works

The default components use semantic variables instead of hard-coded colors.

For example:

--background controls the app background.
--foreground controls default text.
--card and --card-foreground control card surfaces.
--border controls borders.
--ring controls focus rings.
--success, --warning, --info, and --destructive control state UI.

This keeps the component code readable. A button can use bg-primary instead of a fixed color value.

Installation

npm

npx love-ui@latest add colors-zinc

This adds the default color variables.

Extended Color Variables

LoveUI adds extra variables for state-based UI such as alerts, badges, validation, and status messages:

--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.

Customizing the theme

To customize LoveUI, change the values in :root and .dark.

Keep the token names stable when possible. Components expect those names, and changing only the values lets every component update together.

When changing colors, check:

Text contrast on light and dark backgrounds.
Focus ring visibility.
Disabled state visibility.
Alert and badge readability.
Destructive action clarity.

Adding component-specific styles

For one-off changes, update the class names in the copied component file.

For reusable changes, add or adjust variants in the component. This is useful for buttons, badges, cards, alerts, and other components that need a small set of approved styles.

Avoid hiding important state with only color. Pair color with text, icons, or labels when the state matters.