Colors

Overview#

Tokens mirror Tailwind color conventions, so names align with utility classes and stay predictable in your project.

Core concepts#

The UI draws from one of nine neutral gray scales. The scale you choose sets backgrounds, borders, and muted tones for the whole theme.

The default palette is neutral, anchored at neutral-50 in light mode and neutral-950 in dark mode. Preview another scale with the swatches below:

Click a swatch to switch the neutral scale and preview the theme across the docs. Subtle differences between grays are easiest to judge in dark mode.

Theme Tokens#

These tokens live in your CSS file under :root and .dark.

background / foreground#

The default app background and text color for the page shell, page sections, and default text.

• --background
• --foreground

card / card-foreground#

Elevated surfaces and the content inside them, including Card, dashboard panels, and settings panels.

• --card
• --card-foreground

popover / popover-foreground#

Floating surfaces and the content inside them, such as Popover, DropdownMenu, ContextMenu, and other overlays.

• --popover
• --popover-foreground

primary / primary-foreground#

High-emphasis actions and brand surfaces, including the default Button, selected states, badges, and active accents.

• --primary
• --primary-foreground

secondary / secondary-foreground#

Lower-emphasis filled actions and supporting surfaces, such as secondary buttons, secondary badges, and supporting UI.

• --secondary
• --secondary-foreground

muted / muted-foreground#

Subtle surfaces and lower-emphasis content for descriptions, placeholders, empty states, helper text, and subdued surfaces.

• --muted
• --muted-foreground

accent / accent-foreground#

Interactive hover, focus, and active surfaces for ghost buttons, menu highlight states, hovered rows, and selected items.

• --accent
• --accent-foreground

destructive / destructive-foreground#

Destructive actions and error emphasis for destructive buttons, invalid states, and destructive menu items.

• --destructive
• --destructive-foreground

info / info-foreground#

Informational actions and emphasis for informational buttons, badges, alerts, status, etc.

• --info
• --info-foreground

success / success-foreground#

Success actions and emphasis for success buttons, badges, alerts, status, etc.

• --success
• --success-foreground

warning / warning-foreground#

Warning actions and emphasis for warning buttons, badges, alerts, status, etc.

• --warning
• --warning-foreground

border#

Default borders and separators on cards, menus, tables, separators, and layout dividers.

• --border
• --border-foreground

input#

Form control borders and input surface treatment on Input, Textarea, Select, and outline-style controls.

• --input
• --input-foreground

ring#

Focus rings and outlines on buttons, inputs, checkboxes, menus, and other focusable controls. It follows the primary color.

• --ring
• --ring-foreground

sidebar / sidebar-foreground#

The base sidebar surface and default sidebar text on the Sidebar container and its default content.

• --sidebar
• --sidebar-foreground

sidebar-primary / sidebar-primary-foreground#

High-emphasis actions inside the sidebar for active items, icon tiles, badges, and sidebar CTAs.

• --sidebar-primary
• --sidebar-primary-foreground

sidebar-accent / sidebar-accent-foreground#

Hover and selected states inside the sidebar for menu hover states, open items, and interactive rows.

• --sidebar-accent
• --sidebar-accent-foreground

sidebar-border#

Sidebar-specific borders and separators on sidebar headers, groups, and internal dividers.

• --sidebar-border

sidebar-ring#

Sidebar-specific focus rings on focused controls inside the sidebar. It follows the primary color.

• --sidebar-ring

radius#

The base corner radius scale for cards, inputs, buttons, popovers, and the derived radius-* tokens.

Preset theme classes are documented in Styling.