Make it yours

Apply a colour theme

Open a theme page, check it in light and dark, then install it. The CLI writes the variables into your global stylesheet:

pnpmnpmyarnbun
pnpm dlx shadcn@latest add https://ui.tealmac.com/r/themes/<id>.json
Copy

Prefer to paste? Every theme page has a Copy CSS button with the :root and .dark blocks.

Or apply a preset

A preset installs the same way and also sets --font-sans, spacing and shadow tokens:

pnpmnpmyarnbun
pnpm dlx shadcn@latest add https://ui.tealmac.com/r/presets/<id>.json
Copy

The preset names its typeface but does not download it. Load the font in your app, for example with next/font or a Fontsource package, so the name in --font-sans resolves.

Set your brand colour

To keep a theme but swap the accent, override a couple of variables after it in your global CSS:

Copy:root {
  --primary: oklch(0.55 0.12 190);
  --primary-foreground: oklch(0.98 0 0);
  --ring: oklch(0.55 0.12 190);
}
 
.dark {
  --primary: oklch(0.72 0.12 190);
  --primary-foreground: oklch(0.15 0 0);
  --ring: oklch(0.72 0.12 190);
}

Keep text on --primary at a contrast ratio of 4.5:1 or more. The theme customizer on /themes checks every pairing for you.

Adjust corners and type

--radius drives every rounded corner. Set it to 0rem for square edges or 1rem for soft ones. Components use font-sans, so changing --font-sans changes the typeface everywhere.

Check dark mode

Toggle the dark class on <html> (or use next-themes, see Dark mode) and look at a few screens. Every theme and preset ships both modes.