Theme

--background

--card

--popover

--primary

--secondary

--muted

--accent

--destructive

--sidebar

--chart-1

--chart-3

--chart-5

Every colour, radius, font and shadow the components use is a CSS variable defined in uqudo-theme.css. The file is installed next to globals.css and imported from it, so the theme lives in one place and updates by re-running one command.

Installation

The init-uqudo-ui preset already includes the theme. Use this only when you want the tokens on their own.

npx shadcn@latest add @uqudo/theme

The CLI writes app/uqudo-theme.css and adds @import "./uqudo-theme.css"; after the existing imports in globals.css. It does not remove anything, so finish by hand:

Delete `:root` and `.dark` from `globals.css`

They come after the import and would override the theme. Keep @custom-variant dark, @theme inline and @layer base. See the installation guide for a before/after.

Provide `--font-inter`

--font-sans is var(--font-inter), Inter, sans-serif. Load Inter with next/font and put its variable class on <html>:

app/layout.tsx

const inter = Inter({ subsets: ["latin"], variable: "--font-inter" })

Usage

Nothing to import in components. Use the Tailwind utilities the tokens map to:

<div className="bg-card text-card-foreground rounded-lg border shadow-sm">
  <button className="bg-primary text-primary-foreground rounded-md">Save</button>
</div>

Dark mode

Tokens switch when a .dark class is present on an ancestor — normally <html>, toggled by next-themes:

app/layout.tsx

import { ThemeProvider } from "next-themes"

<html lang="en" suppressHydrationWarning>
  <body>
    <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
      {children}
    </ThemeProvider>
  </body>
</html>

Overriding a token

Declare it in globals.css after the import. Later declarations win, so this is the intended escape hatch — never edit uqudo-theme.css, it is replaced on update.

app/globals.css

@import "./uqudo-theme.css";

:root {
  --radius: 0.5rem;
}

Updating

The file already exists, so pass --overwrite:

npx shadcn@latest add @uqudo/theme --overwrite

API reference

uqudo-theme.css defines the variables below on :root (light) and .dark, plus the @theme inline block that exposes them as Tailwind utilities (bg-primary, rounded-lg, shadow-md, font-sans, …).

Prop

Type

On this page