Bosco

Bosco is a blue shadcn/ui theme with pill corners and sans-serif typography, in light and dark modes.

Blue Warm Pill-shaped

Sans: Nunito
Serif: Lora
Mono: Fira Code
Radius: 1.025rem

Open in editor

Create project

Deploy your new project in one click.

Name

Framework

Notes

Visitors

January – June

+12.5%

Buttons

Typography

The theme's three font families.

Sans · Nunito

The quick brown fox

Serif · Lora

jumps over the lazy dog.

Mono · Fira Code

npx shadcn add button

Account

Accept terms and conditions

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

CardPayPalApple Pay

Heads up!

You can add components to your app using the CLI.

Payment failed

Please update your billing details.

Team

Invite your teammates to collaborate.

SDJLINWK

OwnerEditorViewerSuspended

Storage7.2 of 10 GB

Volume64%

Invoices

Invoice	Status	Amount
INV001	Paid	$250.00
INV002	Pending	$150.00
INV003	Unpaid	$350.00
INV004	Paid	$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.

Include success, warning & info colors

:root {
  --background: oklch(0.9329 0.0222 74.09);
  --foreground: oklch(0.3447 0.0665 255.13);
  --card: oklch(0.9751 0.0107 76.6);
  --card-foreground: oklch(0.3447 0.0665 255.13);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.4712 0 0);
  --primary: oklch(0.3447 0.0665 255.13);
  --primary-foreground: oklch(0.9329 0.0222 74.09);
  --secondary: oklch(0.8738 0.0391 250.68);
  --secondary-foreground: oklch(0.3447 0.0665 255.13);
  --muted: oklch(0.8917 0.0173 76.1);
  --muted-foreground: oklch(0.6512 0.0102 106.68);
  --accent: oklch(0.9312 0.1789 111.47);
  --accent-foreground: oklch(0.2587 0.0511 119.14);
  --destructive: oklch(0.7091 0.1697 21.96);
  --destructive-foreground: oklch(1 0 0);
  --border: oklch(0.9428 0.0114 71.9);
  --input: oklch(0.8668 0.0183 64.9);
  --ring: oklch(0.5509 0.1084 256);
  --chart-1: oklch(0.5509 0.1084 256);
  --chart-2: oklch(0.9312 0.1789 111.47);
  --chart-3: oklch(0.395 0.06 63.61);
  --chart-4: oklch(0.8738 0.0391 250.68);
  --chart-5: oklch(0.6512 0.0102 106.68);
  --sidebar: oklch(0.914 0.0424 343.09);
  --sidebar-foreground: oklch(0.3211 0 0);
  --sidebar-primary: oklch(0.6559 0.2118 354.31);
  --sidebar-primary-foreground: oklch(1 0 0);
  --sidebar-accent: oklch(0.8228 0.1095 346.02);
  --sidebar-accent-foreground: oklch(0.3211 0 0);
  --sidebar-border: oklch(0.9464 0.0327 307.17);
  --sidebar-ring: oklch(0.6559 0.2118 354.31);
  --font-sans: Nunito, sans-serif;
  --font-serif: Lora, serif;
  --font-mono: Fira Code, monospace;
  --radius: 1.025rem;
  --spacing: 0.25rem;
  --tracking-normal: 0em;
  --shadow-color: oklch(0.345 0.0657 254.37);
  --shadow-opacity: 0.8;
  --shadow-blur: 24px;
  --shadow-spread: 0px;
  --shadow-offset-x: 0px;
  --shadow-offset-y: 8px;
  --shadow-2xs: 0px 8px 24px 0px hsl(213 48% 24% / 0.40);
  --shadow-xs: 0px 8px 24px 0px hsl(213 48% 24% / 0.40);
  --shadow-sm: 0px 8px 24px 0px hsl(213 48% 24% / 0.80), 0px 1px 2px -1px hsl(213 48% 24% / 0.80);
  --shadow: 0px 8px 24px 0px hsl(213 48% 24% / 0.80), 0px 1px 2px -1px hsl(213 48% 24% / 0.80);
  --shadow-md: 0px 8px 24px 0px hsl(213 48% 24% / 0.80), 0px 2px 4px -1px hsl(213 48% 24% / 0.80);
  --shadow-lg: 0px 8px 24px 0px hsl(213 48% 24% / 0.80), 0px 4px 6px -1px hsl(213 48% 24% / 0.80);
  --shadow-xl: 0px 8px 24px 0px hsl(213 48% 24% / 0.80), 0px 8px 10px -1px hsl(213 48% 24% / 0.80);
  --shadow-2xl: 0px 8px 24px 0px hsl(213 48% 24% / 2.00);
}

.dark {
  --background: oklch(0.2098 0.0083 84.59);
  --foreground: oklch(0.9329 0.0222 74.09);
  --card: oklch(0.2483 0.0152 89.92);
  --card-foreground: oklch(0.9329 0.0222 74.09);
  --popover: oklch(0.2902 0.0299 233.54);
  --popover-foreground: oklch(0.9306 0.0197 349.08);
  --primary: oklch(0.9329 0.0222 74.09);
  --primary-foreground: oklch(0.3447 0.0665 255.13);
  --secondary: oklch(0.8738 0.0391 250.68);
  --secondary-foreground: oklch(0.3447 0.0665 255.13);
  --muted: oklch(0.2998 0.0157 79.58);
  --muted-foreground: oklch(0.6369 0.0077 88.67);
  --accent: oklch(0.9312 0.1789 111.47);
  --accent-foreground: oklch(0.2587 0.0511 119.14);
  --destructive: oklch(0.6702 0.1806 350.36);
  --destructive-foreground: oklch(0.2497 0.0305 234.16);
  --border: oklch(0.2987 0.0151 84.56);
  --input: oklch(0.4108 0.0175 84.58);
  --ring: oklch(0.6842 0.1023 255.43);
  --chart-1: oklch(0.6842 0.1023 255.43);
  --chart-2: oklch(0.9312 0.1789 111.47);
  --chart-3: oklch(0.5334 0.0673 62.33);
  --chart-4: oklch(0.8738 0.0391 250.68);
  --chart-5: oklch(0.6369 0.0077 88.67);
  --sidebar: oklch(0.2303 0.027 235.97);
  --sidebar-foreground: oklch(0.967 0.0029 264.54);
  --sidebar-primary: oklch(0.6559 0.2118 354.31);
  --sidebar-primary-foreground: oklch(1 0 0);
  --sidebar-accent: oklch(0.8228 0.1095 346.02);
  --sidebar-accent-foreground: oklch(0.2781 0.0296 256.85);
  --sidebar-border: oklch(0.3729 0.0306 259.73);
  --sidebar-ring: oklch(0.6559 0.2118 354.31);
  --font-sans: Nunito, sans-serif;
  --font-serif: Lora, serif;
  --font-mono: Fira Code, monospace;
  --radius: 1.025rem;
  --spacing: 0.25rem;
  --tracking-normal: 0em;
  --shadow-color: oklch(0 0 0);
  --shadow-opacity: 0.36;
  --shadow-blur: 24px;
  --shadow-spread: 0px;
  --shadow-offset-x: 0px;
  --shadow-offset-y: 8px;
  --shadow-2xs: 0px 8px 24px 0px hsl(0 0% 0% / 0.18);
  --shadow-xs: 0px 8px 24px 0px hsl(0 0% 0% / 0.18);
  --shadow-sm: 0px 8px 24px 0px hsl(0 0% 0% / 0.36), 0px 1px 2px -1px hsl(0 0% 0% / 0.36);
  --shadow: 0px 8px 24px 0px hsl(0 0% 0% / 0.36), 0px 1px 2px -1px hsl(0 0% 0% / 0.36);
  --shadow-md: 0px 8px 24px 0px hsl(0 0% 0% / 0.36), 0px 2px 4px -1px hsl(0 0% 0% / 0.36);
  --shadow-lg: 0px 8px 24px 0px hsl(0 0% 0% / 0.36), 0px 4px 6px -1px hsl(0 0% 0% / 0.36);
  --shadow-xl: 0px 8px 24px 0px hsl(0 0% 0% / 0.36), 0px 8px 10px -1px hsl(0 0% 0% / 0.36);
  --shadow-2xl: 0px 8px 24px 0px hsl(0 0% 0% / 0.90);
}

@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);
  }
}