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 Picker
- Dialog
- Drawer
- Editable
- Field
- File Upload
- Float
- 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
- Popover
- Progress
- Prose
- QR Code
- Radio Group
- Rating
- Resizable
- Scroll Area
- Segment Group
- Select
- Separator
- Sheet
- Sidebar
- Signature Pad
- Skeleton
- Skip Nav
- Slider
- Spinner
- Status
- Steps
- Switch
- Table
- Tabs
- Textarea
- Timer
- Toast
- Toggle Group
- Toggle Tooltip
- Toggle
- Tooltip
- Tour
- Tree View
Overview
Everything here is driven by CSS variables, which is what keeps borders crisp and stacking clear on screen. If you need the token list and how colors map to utilities, read Colors. Borders are deliberately a little see-through and sit next to light shadows so surfaces read as separate layers. You can swap in your own palette, but the defaults are balanced for that recipe—typical flat themes often end up with muddier edges or flatter depth.
Installation
See Get Started for setup. To add the theme yourself, paste the following into globals.css:
@theme inline { --color-background: var(--background); --color-foreground: var(--foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-success: var(--success); --color-success-foreground: var(--success-foreground); --color-info: var(--info); --color-info-foreground: var(--info-foreground); --color-warning: var(--warning); --color-warning-foreground: var(--warning-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-xs: calc(var(--radius) * 0.25); --radius-sm: calc(var(--radius) * 0.5); --radius-md: calc(var(--radius) * 0.75); --radius-lg: calc(var(--radius) * 1); --radius-xl: calc(var(--radius) * 1.5); --radius-2xl: calc(var(--radius) * 2); --radius-3xl: calc(var(--radius) * 3); --radius-4xl: calc(var(--radius) * 4); } :root { --radius: 0.5rem; --background: var(--color-neutral-50); --foreground: var(--color-neutral-800); --card: var(--color-neutral-50); --card-foreground: var(--color-neutral-800); --popover: var(--color-neutral-50); --popover-foreground: var(--color-neutral-800); --primary: var(--color-neutral-800); --primary-foreground: var(--color-neutral-50); --secondary: color-mix( in srgb, var(--color-neutral-950) 4%, var(--background) ); --secondary-foreground: var(--color-neutral-800); --muted: color-mix(in srgb, var(--color-neutral-950) 4%, var(--background)); --muted-foreground: color-mix( in srgb, var(--color-neutral-500) 90%, var(--color-neutral-950) ); --accent: color-mix(in srgb, var(--color-neutral-950) 4%, var(--background)); --accent-foreground: var(--color-neutral-800); --destructive: var(--color-red-500); --destructive-foreground: var(--color-red-700); --info: var(--color-blue-500); --info-foreground: var(--color-blue-700); --success: var(--color-emerald-500); --success-foreground: var(--color-emerald-700); --warning: var(--color-amber-500); --warning-foreground: var(--color-amber-700); --border: color-mix(in srgb, var(--color-neutral-950) 8%, var(--background)); --input: color-mix(in srgb, var(--color-neutral-950) 10%, var(--background)); --ring: var(--color-neutral-400); --sidebar: var(--color-neutral-50); --sidebar-foreground: color-mix( in srgb, var(--color-neutral-800) 64%, var(--sidebar) ); --sidebar-primary: var(--color-neutral-800); --sidebar-primary-foreground: var(--color-neutral-50); --sidebar-accent: color-mix( in srgb, var(--color-neutral-950) 4%, var(--sidebar) ); --sidebar-accent-foreground: var(--color-neutral-800); --sidebar-border: color-mix( in srgb, var(--color-neutral-950) 6%, var(--sidebar) ); --sidebar-ring: var(--color-neutral-400); --chart-1: var(--color-orange-600); --chart-2: var(--color-teal-600); --chart-3: var(--color-cyan-900); --chart-4: var(--color-amber-400); --chart-5: var(--color-amber-500); } .dark { --background: color-mix( in srgb, var(--color-neutral-950) 100%, var(--color-neutral-50) ); --foreground: var(--color-neutral-100); --card: color-mix(in srgb, var(--background) 98%, var(--color-neutral-50)); --card-foreground: var(--color-neutral-100); --popover: color-mix( in srgb, var(--background) 100%, var(--color-neutral-50) ); --popover-foreground: var(--color-neutral-100); --primary: var(--color-neutral-100); --primary-foreground: var(--color-neutral-800); --secondary: color-mix(in srgb, var(--color-white) 4%, var(--background)); --secondary-foreground: var(--color-neutral-100); --muted: color-mix(in srgb, var(--color-neutral-50) 4%, var(--background)); --muted-foreground: color-mix( in srgb, var(--color-neutral-500) 90%, var(--color-neutral-50) ); --accent: color-mix(in srgb, var(--color-neutral-50) 4%, var(--background)); --accent-foreground: var(--color-neutral-100); --destructive: color-mix( in srgb, var(--color-red-600) 90%, var(--color-neutral-50) ); --destructive-foreground: var(--color-red-400); --info: var(--color-blue-500); --info-foreground: var(--color-blue-400); --success: var(--color-emerald-500); --success-foreground: var(--color-emerald-400); --warning: var(--color-amber-500); --warning-foreground: var(--color-amber-400); --border: color-mix(in srgb, var(--color-neutral-50) 6%, var(--background)); --input: color-mix(in srgb, var(--color-neutral-50) 8%, var(--background)); --ring: var(--color-neutral-500); --sidebar: color-mix( in srgb, var(--color-neutral-950) 97%, var(--color-neutral-50) ); --sidebar-foreground: color-mix( in srgb, var(--color-neutral-100) 64%, var(--sidebar) ); --sidebar-primary: var(--color-neutral-100); --sidebar-primary-foreground: var(--color-neutral-800); --sidebar-accent: color-mix( in srgb, var(--color-neutral-50) 4%, var(--sidebar) ); --sidebar-accent-foreground: var(--color-neutral-100); --sidebar-border: color-mix( in srgb, var(--color-neutral-50) 5%, var(--sidebar) ); --sidebar-ring: var(--color-neutral-400); --chart-1: var(--color-blue-700); --chart-2: var(--color-emerald-500); --chart-3: var(--color-amber-500); --chart-4: var(--color-purple-500); --chart-5: var(--color-rose-500); }
Font Variables
The theme preset defines --font-sans with system fallbacks. To use custom typefaces, set this variable in your layout via next/font or @fontsource-variable:
import { Inter } from "next/font/google"; const fontSans = Inter({ variable: "--font-sans", subsets: ["latin"] }); export default function RootLayout({ children }) { return ( <html lang="en"> <body className={fontSans.variable} > {children} </body> </html> ); }
Apply the variables on html or body so they cascade.
Customizing Colors
To customize colors interactively, use the Themes page: pick primary and gray bases, adjust border radius, preview light and dark, then copy the generated CSS variables into your globals.css (or merge them with the snippet below).