Zinc

Monochrome buttons and highlights on the cool gray Zinc base, with cyan charts and square corners.

Base Zinc
Corners Square
Charts Cyan

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.141 0.005 285.823);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.141 0.005 285.823);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.141 0.005 285.823);
  --primary: oklch(0.21 0.006 285.885);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.967 0.001 286.375);
  --secondary-foreground: oklch(0.21 0.006 285.885);
  --muted: oklch(0.967 0.001 286.375);
  --muted-foreground: oklch(0.552 0.016 285.938);
  --accent: oklch(0.21 0.006 285.885);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.92 0.004 286.32);
  --input: oklch(0.92 0.004 286.32);
  --ring: oklch(0.705 0.015 286.067);
  --chart-1: oklch(0.865 0.127 207.078);
  --chart-2: oklch(0.715 0.143 215.221);
  --chart-3: oklch(0.609 0.126 221.723);
  --chart-4: oklch(0.52 0.105 223.128);
  --chart-5: oklch(0.45 0.085 224.283);
  --radius: 0;
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.141 0.005 285.823);
  --sidebar-primary: oklch(0.21 0.006 285.885);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.967 0.001 286.375);
  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
  --sidebar-border: oklch(0.92 0.004 286.32);
  --sidebar-ring: oklch(0.705 0.015 286.067);
}

.dark {
  --background: oklch(0.141 0.005 285.823);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.21 0.006 285.885);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.21 0.006 285.885);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.92 0.004 286.32);
  --primary-foreground: oklch(0.21 0.006 285.885);
  --secondary: oklch(0.274 0.006 286.033);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.274 0.006 286.033);
  --muted-foreground: oklch(0.705 0.015 286.067);
  --accent: oklch(0.92 0.004 286.32);
  --accent-foreground: oklch(0.21 0.006 285.885);
  --destructive: oklch(0.704 0.191 22.216);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.552 0.016 285.938);
  --chart-1: oklch(0.865 0.127 207.078);
  --chart-2: oklch(0.715 0.143 215.221);
  --chart-3: oklch(0.609 0.126 221.723);
  --chart-4: oklch(0.52 0.105 223.128);
  --chart-5: oklch(0.45 0.085 224.283);
  --sidebar: oklch(0.21 0.006 285.885);
  --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.274 0.006 286.033);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(1 0 0 / 10%);
  --sidebar-ring: oklch(0.552 0.016 285.938);
  --radius: 0;
}

Want the whole look?

Zinc comes from preset b1t3qhVEW, which also sets the Lyra component style, Inter and HugeIcons.

Open the preset

Zinc 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.