shadcnpreset
  • Ask AI
  • Community
shadcnpreset

Don’t click random. Describe what you’re building or the vibe you want. AI surfaces matching presets, shows real components, and helps you choose fast. Open source and free.

Tools

  • Preset Theme CSS Generator
  • Preset color contrast checker
  • Tailwind / CSS Image filter generator
  • shadcn preset variables Figma plugin
  • shadcn theme generator
  • shadcn themes
  • OG image debugger

Navigation

  • Ask AI
  • Community
  • Tools

Presets

  • High contrast presets
  • My presets

Support

  • Get in touch

© 2026 shadcnpreset. All rights reserved.

Preset Theme CSS Generator

Decode a shadcn preset, preview it, and generate CSS custom properties for light and dark mode you can copy and paste into your project.

b0

nova style, neutral base, neutral theme, neutral charts, lucide, inter font

css
:root {  --background: oklch(1 0 0);  --foreground: oklch(0.145 0 0);  --card: oklch(1 0 0);  --card-foreground: oklch(0.145 0 0);  --popover: oklch(1 0 0);  --popover-foreground: oklch(0.145 0 0);  --primary: oklch(0.205 0 0);  --primary-foreground: oklch(0.985 0 0);  --secondary: oklch(0.97 0 0);  --secondary-foreground: oklch(0.205 0 0);  --muted: oklch(0.97 0 0);  --muted-foreground: oklch(0.556 0 0);  --accent: oklch(0.97 0 0);  --accent-foreground: oklch(0.205 0 0);  --destructive: oklch(0.577 0.245 27.325);  --border: oklch(0.922 0 0);  --input: oklch(0.922 0 0);  --ring: oklch(0.708 0 0);  --chart-1: oklch(0.87 0 0);  --chart-2: oklch(0.556 0 0);  --chart-3: oklch(0.439 0 0);  --chart-4: oklch(0.371 0 0);  --chart-5: oklch(0.269 0 0);  --radius: 0.625rem;  --sidebar: oklch(0.985 0 0);  --sidebar-foreground: oklch(0.145 0 0);  --sidebar-primary: oklch(0.205 0 0);  --sidebar-primary-foreground: oklch(0.985 0 0);  --sidebar-accent: oklch(0.97 0 0);  --sidebar-accent-foreground: oklch(0.205 0 0);  --sidebar-border: oklch(0.922 0 0);  --sidebar-ring: oklch(0.708 0 0);  --font-sans: "Inter", system-ui, sans-serif;  --font-heading: var(--font-sans);}
.dark {  --background: oklch(0.145 0 0);  --foreground: oklch(0.985 0 0);  --card: oklch(0.205 0 0);  --card-foreground: oklch(0.985 0 0);  --popover: oklch(0.205 0 0);  --popover-foreground: oklch(0.985 0 0);  --primary: oklch(0.922 0 0);  --primary-foreground: oklch(0.205 0 0);  --secondary: oklch(0.269 0 0);  --secondary-foreground: oklch(0.985 0 0);  --muted: oklch(0.269 0 0);  --muted-foreground: oklch(0.708 0 0);  --accent: oklch(0.269 0 0);  --accent-foreground: oklch(0.985 0 0);  --destructive: oklch(0.704 0.191 22.216);  --border: oklch(1 0 0 / 10%);  --input: oklch(1 0 0 / 15%);  --ring: oklch(0.556 0 0);  --chart-1: oklch(0.87 0 0);  --chart-2: oklch(0.556 0 0);  --chart-3: oklch(0.439 0 0);  --chart-4: oklch(0.371 0 0);  --chart-5: oklch(0.269 0 0);  --sidebar: oklch(0.205 0 0);  --sidebar-foreground: oklch(0.985 0 0);  --sidebar-primary: oklch(0.488 0.243 264.376);  --sidebar-primary-foreground: oklch(0.985 0 0);  --sidebar-accent: oklch(0.269 0 0);  --sidebar-accent-foreground: oklch(0.985 0 0);  --sidebar-border: oklch(1 0 0 / 10%);  --sidebar-ring: oklch(0.556 0 0);  --radius: 0.625rem;}
About preset b0
Decoded data for the current preset code.
Code
b0
Style
nova
Base color
neutral
Theme
neutral
Chart color
neutral
Body font
inter
Heading font
inter (inherits body font)
Icons
lucide
Radius
default
Menu color
default
Menu accent
subtle
:root {  --background: oklch(1 0 0);  --foreground: oklch(0.145 0 0);  --card: oklch(1 0 0);  --card-foreground: oklch(0.145 0 0);  --popover: oklch(1 0 0);  --popover-foreground: oklch(0.145 0 0);  --primary: oklch(0.205 0 0);  --primary-foreground: oklch(0.985 0 0);  --secondary: oklch(0.97 0 0);  --secondary-foreground: oklch(0.205 0 0);  --muted: oklch(0.97 0 0);  --muted-foreground: oklch(0.556 0 0);  --accent: oklch(0.97 0 0);  --accent-foreground: oklch(0.205 0 0);  --destructive: oklch(0.577 0.245 27.325);  --border: oklch(0.922 0 0);  --input: oklch(0.922 0 0);  --ring: oklch(0.708 0 0);  --chart-1: oklch(0.87 0 0);  --chart-2: oklch(0.556 0 0);  --chart-3: oklch(0.439 0 0);  --chart-4: oklch(0.371 0 0);  --chart-5: oklch(0.269 0 0);  --radius: 0.625rem;  --sidebar: oklch(0.985 0 0);  --sidebar-foreground: oklch(0.145 0 0);  --sidebar-primary: oklch(0.205 0 0);  --sidebar-primary-foreground: oklch(0.985 0 0);  --sidebar-accent: oklch(0.97 0 0);  --sidebar-accent-foreground: oklch(0.205 0 0);  --sidebar-border: oklch(0.922 0 0);  --sidebar-ring: oklch(0.708 0 0);  --font-sans: "Inter", system-ui, sans-serif;  --font-heading: var(--font-sans);}
.dark {  --background: oklch(0.145 0 0);  --foreground: oklch(0.985 0 0);  --card: oklch(0.205 0 0);  --card-foreground: oklch(0.985 0 0);  --popover: oklch(0.205 0 0);  --popover-foreground: oklch(0.985 0 0);  --primary: oklch(0.922 0 0);  --primary-foreground: oklch(0.205 0 0);  --secondary: oklch(0.269 0 0);  --secondary-foreground: oklch(0.985 0 0);  --muted: oklch(0.269 0 0);  --muted-foreground: oklch(0.708 0 0);  --accent: oklch(0.269 0 0);  --accent-foreground: oklch(0.985 0 0);  --destructive: oklch(0.704 0.191 22.216);  --border: oklch(1 0 0 / 10%);  --input: oklch(1 0 0 / 15%);  --ring: oklch(0.556 0 0);  --chart-1: oklch(0.87 0 0);  --chart-2: oklch(0.556 0 0);  --chart-3: oklch(0.439 0 0);  --chart-4: oklch(0.371 0 0);  --chart-5: oklch(0.269 0 0);  --sidebar: oklch(0.205 0 0);  --sidebar-foreground: oklch(0.985 0 0);  --sidebar-primary: oklch(0.488 0.243 264.376);  --sidebar-primary-foreground: oklch(0.985 0 0);  --sidebar-accent: oklch(0.269 0 0);  --sidebar-accent-foreground: oklch(0.985 0 0);  --sidebar-border: oklch(1 0 0 / 10%);  --sidebar-ring: oklch(0.556 0 0);  --radius: 0.625rem;}