Choose a UI Library

This template still needs a UI component library. Choose one like shadcn/ui or Tailwind Plus. The theme in globals.css uses shadcn's semantic colour naming convention. Your choice affects how to proceed.

shadcn/ui

You're ready to go. The colour variables in globals.css already match shadcn's naming (--background, --foreground, --primary, --muted, etc.), so installed components inherit your theme automatically. To customise colours, change the values in :root and .dark—all components update instantly.

Tailwind Plus

Tailwind Plus includes UI Kit (Catalyst) and UI Blocks. The UI Kit typically goes into components/ui, whilst blocks go into page.tsx or components/sections/. Both use Tailwind's default palette (zinc, gray, indigo, etc.) rather than semantic names.

To theme them, either find-replace palette classes with semantic ones (bg-zinc-900 → bg-background), or override the palette in @theme—for example, --color-zinc-900: oklch(...). Note that Blocks are often light-mode only.

With either library, colours remain centralised. The @theme override method requires no code changes; find-replace gives full control over naming but requires editing files.

Advanced: Palette Remapping

Instead of directly overriding --color-zinc-900, you can define your brand palette first, then remap Tailwind's colours to it:

@theme {
  --color-brand-600: oklch(0.51 0.24 280);
}
:root {
  --color-indigo-600: var(--color-brand-600);
  --color-blue-600: var(--color-brand-600);  /* both now use your brand */
}

Benefits: define colours once with meaningful names, remap multiple Tailwind palettes to the same brand colour, clearer separation between your palette and Tailwind's naming.

Deploy NowDocumentation