Red on Mauve

Red buttons and highlights on the purple-tinted Mauve base, with sky charts and square corners.

Base Mauve
Corners Square
Charts Sky

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.008 326);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0.008 326);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0.008 326);
  --primary: oklch(0.505 0.213 27.518);
  --primary-foreground: oklch(0.971 0.013 17.38);
  --secondary: oklch(0.967 0.001 286.375);
  --secondary-foreground: oklch(0.21 0.006 285.885);
  --muted: oklch(0.96 0.003 325.6);
  --muted-foreground: oklch(0.542 0.034 322.5);
  --accent: oklch(0.505 0.213 27.518);
  --accent-foreground: oklch(0.971 0.013 17.38);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.922 0.005 325.62);
  --input: oklch(0.922 0.005 325.62);
  --ring: oklch(0.711 0.019 323.02);
  --chart-1: oklch(0.828 0.111 230.318);
  --chart-2: oklch(0.685 0.169 237.323);
  --chart-3: oklch(0.588 0.158 241.966);
  --chart-4: oklch(0.5 0.134 242.749);
  --chart-5: oklch(0.443 0.11 240.79);
  --radius: 0;
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0.008 326);
  --sidebar-primary: oklch(0.577 0.245 27.325);
  --sidebar-primary-foreground: oklch(0.971 0.013 17.38);
  --sidebar-accent: oklch(0.96 0.003 325.6);
  --sidebar-accent-foreground: oklch(0.212 0.019 322.12);
  --sidebar-border: oklch(0.922 0.005 325.62);
  --sidebar-ring: oklch(0.711 0.019 323.02);
}

.dark {
  --background: oklch(0.145 0.008 326);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.212 0.019 322.12);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.212 0.019 322.12);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.444 0.177 26.899);
  --primary-foreground: oklch(0.971 0.013 17.38);
  --secondary: oklch(0.274 0.006 286.033);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.263 0.024 320.12);
  --muted-foreground: oklch(0.711 0.019 323.02);
  --accent: oklch(0.444 0.177 26.899);
  --accent-foreground: oklch(0.971 0.013 17.38);
  --destructive: oklch(0.704 0.191 22.216);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.542 0.034 322.5);
  --chart-1: oklch(0.828 0.111 230.318);
  --chart-2: oklch(0.685 0.169 237.323);
  --chart-3: oklch(0.588 0.158 241.966);
  --chart-4: oklch(0.5 0.134 242.749);
  --chart-5: oklch(0.443 0.11 240.79);
  --sidebar: oklch(0.212 0.019 322.12);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.637 0.237 25.331);
  --sidebar-primary-foreground: oklch(0.971 0.013 17.38);
  --sidebar-accent: oklch(0.263 0.024 320.12);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(1 0 0 / 10%);
  --sidebar-ring: oklch(0.542 0.034 322.5);
  --radius: 0;
}

Want the whole look?

Red on Mauve comes from preset b5K0K3ezx, which also sets the Lyra component style, JetBrains Mono and Phosphor Icons.

Open the preset

Red on Mauve 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.