Sections

• Introduction
• Installation
• Styling
• Colors
• Forms
• Skills
• RTL
• LLMs.txt
• Changelog

Components

• Accordion
• Action Bar
• Alert Dialog
• Alert
• Announcement
• Aspect Ratio
• Autocomplete
• Avatar
• Badge
• Bottom Navigation
• Breadcrumb
• Button Group
• Button
• Calendar
• Card
• Carousel
• Chart
• Checkbox
• Circular Progress
• Circular Slider
• Clipboard
• Collapsible
• Color Picker
• Combobox
• Command
• Context Menu
• Data List
• Date InputNew
• Date Picker
• Dialog
• DrawerUpdated
• Editable
• Field
• File Upload
• FloatUpdated
• Floating Panel
• Frame
• Hint
• Hover Card
• Image Cropper
• Input Group
• Input OTP
• Input
• Item
• Kbd
• Link Overlay
• Listbox
• Marquee
• Menu
• Native Select
• Number Input
• Pagination
• Password Input
• Popover
• Progress
• Prose
• QR Code
• Radio Group
• Rating
• Resizable
• Scroll Area
• Segment Group
• Select
• Separator
• Sheet
• Sidebar
• Signature Pad
• Skeleton
• Skip Nav
• Slider
• Spinner
• StatusUpdated
• Steps
• Switch
• Table
• Tabs
• Tags Input
• Textarea
• Timer
• Toast
• Toggle Group
• Toggle Tooltip
• Toggle
• Tooltip
• Tour
• Tree View

Utilities

• Client Only
• Download Trigger
• Format
• Highlight
• Hitbox
• JSON Tree View
• Presence
• Show
• Swap

Forms

• Formisch
• React Hook Form
• TanStack Form

Hooks

• useIsMobile

Colors

Copy Markdown

Color palette and color system.

DocsAPI

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:

Slate

500

Gray

500

Zinc

500

Neutral

500

Stone

500

Mauve

500

Olive

500

Mist

500

Taupe

500

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.

Build your own color palette

Try the Theme editor to visually customize primary, neutral colors and radius.

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#

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

• --card
• --card-foreground

popover#

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

• --popover
• --popover-foreground

primary#

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

• --primary
• --primary-foreground

secondary#

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

• --secondary
• --secondary-foreground

muted#

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

• --muted
• --muted-foreground

accent#

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

• --accent
• --accent-foreground

destructive#

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

• --destructive
• --destructive-foreground

info#

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

• --info
• --info-foreground

success#

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

• --success
• --success-foreground

warning#

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#

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

• --sidebar
• --sidebar-foreground

sidebar-primary#

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

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

sidebar-accent#

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.

[

Previous page

Styling ](/docs/styling)[

Next page

Forms ](/docs/forms)

On This Page

OverviewCore conceptsTheme Tokensbackground / foregroundcardpopoverprimarysecondarymutedaccentdestructiveinfosuccesswarningborderinputringsidebarsidebar-primarysidebar-accentsidebar-bordersidebar-ringradius