Setup

Configure the theme layer that powers every component.

Theme stylesheet

The entire color system is a single CSS file that defines custom properties for all four Catppuccin flavors. Drop it into your project and import it after Tailwind:

@import "tailwindcss";
@import "./catppuccin.css";

The file lives at src/styling/catppuccin.css in the repository. It registers all color tokens with Tailwind v4 so utilities like bg-cat-base and text-cat-text work automatically.

Activating a flavor

Set the data-theme attribute on your root element. The default fallback is Mocha.

<html lang="en" data-theme="mocha">
  ...
</html>

Available flavors: latte frappe macchiato mocha

With next-themes

For automatic persistence and system-preference detection, wrap your app with next-themes:

import { ThemeProvider } from "next-themes"

<ThemeProvider
  attribute="data-theme"
  defaultTheme="mocha"
  themes={["latte", "frappe", "macchiato", "mocha"]}
>
  {children}
</ThemeProvider>

Then use useTheme() anywhere to read or change the active flavor.

Accent color

The primary accent defaults to Blue. Override it by setting two CSS properties on the document root:

:root {
  --color-cat-primary: var(--color-cat-mauve);
  --color-cat-secondary: var(--color-cat-pink);
}

All components that use cat-primary will update automatically. Browse the full palette on the flavors page.

Available tokens

Every Catppuccin color is available as a Tailwind utility via the cat-* prefix — e.g. bg-cat-surface0, text-cat-mauve, border-cat-overlay0. These map to CSS custom properties that respond to the active flavor at runtime.