Installation

Get Lilt into your project

LiltUI works in any React project with Tailwind v4 — Next.js, Vite, anything the shadcn CLI supports.

1. Register the @lilt namespace

Run npx shadcn@latest init if your project has no components.json yet, then add the registry:

{
  "registries": {
    "@lilt": "https://lilt-ui.vercel.app/r/{name}.json"
  }
}

2. Add components

Each component brings its dependencies with it — the Lilt theme variables merge into your CSS automatically, and Base UI is installed when a component needs it.

npx shadcn@latest add @lilt/button
# or several at once
npx shadcn@latest add @lilt/field @lilt/dialog @lilt/toast

Fresh create-next-app? Delete the boilerplate --background/--foreground variables and the unlayered body rule from globals.css— unlayered styles beat Lilt's @layer basebody styling, so the page keeps Next's default background until they're gone.

3. Load the fonts

Lilt uses Space Grotesk for display text and DM Sans for body text. The simplest path is Google Fonts in your document head (or use next/font and map the same families onto --font-display and --font-sans):

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap"
  rel="stylesheet"
/>

If your @theme already defines --font-sans (create-next-app sets it to Geist), the CLI keeps your value — replace it with the DM Sans stack yourself: --font-sans: "DM Sans", ui-sans-serif, system-ui, sans-serif;

4. Theme switching

Add @lilt/theme-provider and wrap your app. Dark mode flips on the .dark class; the provider also sets data-theme and persists the choice. The isolate wrapper keeps Base UI popups above your content without z-index wars.

import { ThemeProvider } from "@/components/ui/theme-provider";

export default function RootLayout({ children }) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body>
        <ThemeProvider>
          <div className="isolate">{children}</div>
        </ThemeProvider>
      </body>
    </html>
  );
}

If your project already uses a different dark-mode convention, add Lilt's widened variant to your CSS:

@custom-variant dark (&:where(.dark, [data-theme="dark"], .dark *, [data-theme="dark"] *));