Theming

Components installed via the CLI use Tailwind CSS v4 with CSS custom properties for colors. Add the following setup to your globals.css to make everything work correctly.

Theme Tokens

Add this to your globals.css. The @custom-variant dark line enables class-based dark mode, and --color-primary is used by all components for interactive states.

src/app/globals.css

/* src/app/globals.css */
@import "tailwindcss";

@custom-variant dark (&:is(.dark *));

@theme {
  --color-primary: #4628f1;
}

:root {
  --background: #f6f6f8;
  --foreground: #0f172a;
}

.dark {
  --background: #020617;
  --foreground: #e2e8f0;
}

body {
  color: var(--foreground);
  background: var(--background);
}

--color-primary#4628f1

Buttons, links, active tabs, focus rings

--background (light)#f6f6f8

Page background in light mode

--background (dark)#020617

Page background in dark mode

Surface colors used across components:

Panel light

#ffffff

Card/dialog surface

Panel dark

#161b22

Card/dialog surface

Inner dark

#0d1117

Nested surface

Border dark

#1f2937

Dividers/borders

Dark Mode

All components use class-based dark mode. The dark class on <html> activates all dark: variants. See the Dark Mode page for implementation details.

Token sourceSingle source in globals.css

Mode strategyClass-based via @custom-variant dark

ActivationAdd class="dark" to <html>

Customize

To change the brand color globally, update --color-primary in the @theme block. All components will pick up the new value automatically.

src/app/globals.css

/* Change brand color globally */
@theme {
  --color-primary: #0ea5e9;
}

PreviousInstallation NextDark Mode

react-principles

Theming

Theme Tokens

Dark Mode

Customize

Getting Started

Components