Blue on Neutral

Blue buttons and highlights on the pure gray Neutral base, with yellow charts and large corners.

Base Neutral
Corners Large
Charts Yellow

Colors

Background
Foreground
Primary
Secondary
Muted
Accent
Border
Chart 1
Chart 2
Chart 3
Chart 4
Chart 5

Use this theme

Changes colors and radius only. Your components, fonts and icons stay as they are.

Replace the :root and .dark blocks in your globals.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.488 0.243 264.376);
  --primary-foreground: oklch(0.97 0.014 254.604);
  --secondary: oklch(0.967 0.001 286.375);
  --secondary-foreground: oklch(0.21 0.006 285.885);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.488 0.243 264.376);
  --accent-foreground: oklch(0.97 0.014 254.604);
  --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.905 0.182 98.111);
  --chart-2: oklch(0.795 0.184 86.047);
  --chart-3: oklch(0.681 0.162 75.834);
  --chart-4: oklch(0.554 0.135 66.442);
  --chart-5: oklch(0.476 0.114 61.907);
  --radius: 0.875rem;
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.546 0.245 262.881);
  --sidebar-primary-foreground: oklch(0.97 0.014 254.604);
  --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);
}

.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.424 0.199 265.638);
  --primary-foreground: oklch(0.97 0.014 254.604);
  --secondary: oklch(0.274 0.006 286.033);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.424 0.199 265.638);
  --accent-foreground: oklch(0.97 0.014 254.604);
  --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.905 0.182 98.111);
  --chart-2: oklch(0.795 0.184 86.047);
  --chart-3: oklch(0.681 0.162 75.834);
  --chart-4: oklch(0.554 0.135 66.442);
  --chart-5: oklch(0.476 0.114 61.907);
  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.623 0.214 259.815);
  --sidebar-primary-foreground: oklch(0.97 0.014 254.604);
  --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.875rem;
}

Want the whole look?

Blue on Neutral comes from preset b6F9LTKNU, which also sets the Nova component style, Noto Sans and Tabler Icons.

Open the preset

Blue on Neutral in real blocks

Marketing blocks from shadcncraft Pro

shadcncraft Pro

Every block, your theme.Ship faster with Pro.

Themes are free to copy. shadcncraft Pro is a premium shadcn/ui design system, with blocks, components and the official Figma kit ready for your theme.

Production-ready shadcn/ui blocks and components
The official shadcn/ui Figma kit, in all 8 styles
A Figma plugin for styles, themes and presets
Figma layouts exported to React code
Agent skills and an MCP server for your IDE
Lifetime updates and unlimited commercial use

Get shadcncraft ProFrom $119 · Trusted by 16,000+ creators and teams

One-time payment. We earn a commission on sales.