shadcnthemes
Create theme
All themes

BOS

BOS is a red shadcn/ui theme with rounded corners and sans-serif typography, in light and dark modes.

RedVibrantHigh contrastRoundedInter
Sans
Inter
Serif
Noto Serif Georgian
Mono
JetBrains Mono
Radius
0.5rem
Open in editor
Create project
Deploy your new project in one click.
Visitors
January – June
+12.5%
Buttons
Typography
The theme's three font families.
Sans · Inter
The quick brown fox
Serif · Noto Serif Georgian
jumps over the lazy dog.
Mono · JetBrains Mono
npx shadcn add button
Account
Notifications
Choose what you want to hear about.
Product updates
New features and releases
Security alerts
Sign-ins from new devices
Marketing
Tips, offers and news
Payment method
Team
Invite your teammates to collaborate.
SDJLINWK
OwnerEditorViewerSuspended
Storage7.2 of 10 GB
Volume64%
Invoices
InvoiceStatusAmount
INV001Paid$250.00
INV002Pending$150.00
INV003Unpaid$350.00
INV004Paid$450.00
FAQ

Yes. It adheres to the WAI-ARIA design pattern.

Colors

Click any swatch to copy its OKLCH value.

Base
Brand
Lines
Charts
Sidebar
StatusOptional, generated to match

Use this theme

Install it with the shadcn CLI, paste the CSS, or export tokens for your design tool.

Paste into app/globals.css, replacing the existing :root and .dark blocks.

:root {
  --background: oklch(0.985 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(0.995 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(0.995 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: oklch(0.637 0.237 25.33);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.269 0 0);
  --muted: oklch(0.968 0.007 247.9);
  --muted-foreground: oklch(0.554 0.046 257.42);
  --accent: oklch(0.637 0.237 25.33);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.577 0.245 27.33);
  --destructive-foreground: oklch(1 0 0);
  --border: oklch(0.929 0.013 255.51);
  --input: oklch(0.929 0.013 255.51);
  --ring: oklch(0.637 0.237 25.33);
  --chart-1: oklch(0.637 0.237 25.33);
  --chart-2: oklch(0.7 0.2 60);
  --chart-3: oklch(0.62 0.18 200);
  --chart-4: oklch(0.58 0.22 140);
  --chart-5: oklch(0.65 0.15 280);
  --sidebar: oklch(0.97 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.637 0.237 25.33);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.929 0.013 255.51);
  --sidebar-accent-foreground: oklch(0.145 0 0);
  --sidebar-border: oklch(0.929 0.013 255.51);
  --sidebar-ring: oklch(0.637 0.237 25.33);
  --font-sans: Inter, ui-sans-serif, sans-serif, system-ui;
  --font-serif: Noto Serif Georgian, ui-serif, serif;
  --font-mono: JetBrains Mono, ui-monospace, monospace;
  --radius: 0.5rem;
  --spacing: 0.25rem;
  --tracking-normal: 0em;
  --shadow-color: oklch(0 0 0);
  --shadow-opacity: 0.1;
  --shadow-blur: 4px;
  --shadow-spread: 0px;
  --shadow-offset-x: 0;
  --shadow-offset-y: 1px;
  --shadow-2xs: 0 1px 4px 0px hsl(0 0% 0% / 0.05);
  --shadow-xs: 0 1px 4px 0px hsl(0 0% 0% / 0.05);
  --shadow-sm: 0 1px 4px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow: 0 1px 4px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow-md: 0 1px 4px 0px hsl(0 0% 0% / 0.10), 0 2px 4px -1px hsl(0 0% 0% / 0.10);
  --shadow-lg: 0 1px 4px 0px hsl(0 0% 0% / 0.10), 0 4px 6px -1px hsl(0 0% 0% / 0.10);
  --shadow-xl: 0 1px 4px 0px hsl(0 0% 0% / 0.10), 0 8px 10px -1px hsl(0 0% 0% / 0.10);
  --shadow-2xl: 0 1px 4px 0px hsl(0 0% 0% / 0.25);
}

.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.21 0.006 285.89);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.269 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.637 0.237 25.33);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.274 0.006 286.03);
  --muted-foreground: oklch(0.923 0.003 48.72);
  --accent: oklch(0.637 0.237 25.33);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.704 0.191 22.22);
  --destructive-foreground: oklch(0.985 0 0);
  --border: oklch(0.371 0 0);
  --input: oklch(0.371 0 0);
  --ring: oklch(0.637 0.237 25.33);
  --chart-1: oklch(0.75 0.22 25);
  --chart-2: oklch(0.78 0.18 60);
  --chart-3: oklch(0.7 0.17 200);
  --chart-4: oklch(0.68 0.19 140);
  --chart-5: oklch(0.72 0.14 280);
  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.704 0.191 22.22);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.922 0 0);
  --sidebar-border: oklch(0.371 0 0);
  --sidebar-ring: oklch(0.704 0.191 22.22);
  --font-sans: Inter, ui-sans-serif, sans-serif, system-ui;
  --font-serif: Noto Serif Georgian, ui-serif, serif;
  --font-mono: JetBrains Mono, ui-monospace, monospace;
  --radius: 0.5rem;
  --spacing: 0.25rem;
  --tracking-normal: 0em;
  --shadow-color: oklch(0 0 0);
  --shadow-opacity: 0.1;
  --shadow-blur: 4px;
  --shadow-spread: 0px;
  --shadow-offset-x: 0;
  --shadow-offset-y: 1px;
  --shadow-2xs: 0 1px 4px 0px hsl(0 0% 0% / 0.05);
  --shadow-xs: 0 1px 4px 0px hsl(0 0% 0% / 0.05);
  --shadow-sm: 0 1px 4px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow: 0 1px 4px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow-md: 0 1px 4px 0px hsl(0 0% 0% / 0.10), 0 2px 4px -1px hsl(0 0% 0% / 0.10);
  --shadow-lg: 0 1px 4px 0px hsl(0 0% 0% / 0.10), 0 4px 6px -1px hsl(0 0% 0% / 0.10);
  --shadow-xl: 0 1px 4px 0px hsl(0 0% 0% / 0.10), 0 8px 10px -1px hsl(0 0% 0% / 0.10);
  --shadow-2xl: 0 1px 4px 0px hsl(0 0% 0% / 0.25);
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--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);
  --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);

  --font-sans: var(--font-sans);
  --font-mono: var(--font-mono);
  --font-serif: var(--font-serif);

  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);

  --shadow-2xs: var(--shadow-2xs);
  --shadow-xs: var(--shadow-xs);
  --shadow-sm: var(--shadow-sm);
  --shadow: var(--shadow);
  --shadow-md: var(--shadow-md);
  --shadow-lg: var(--shadow-lg);
  --shadow-xl: var(--shadow-xl);
  --shadow-2xl: var(--shadow-2xl);

  --tracking-tighter: calc(var(--tracking-normal) - 0.05em);
  --tracking-tight: calc(var(--tracking-normal) - 0.025em);
  --tracking-normal: var(--tracking-normal);
  --tracking-wide: calc(var(--tracking-normal) + 0.025em);
  --tracking-wider: calc(var(--tracking-normal) + 0.05em);
  --tracking-widest: calc(var(--tracking-normal) + 0.1em);
}

@layer base {
  body {
    letter-spacing: var(--tracking-normal);
  }
}

Similar themes