Emerald Vivid

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

Teal Pill-shaped Plus Jakarta Sans

Sans: Plus Jakarta Sans
Serif: Chillax
Mono: Fira Code
Radius: 1rem

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 · Plus Jakarta Sans

The quick brown fox

Serif · Chillax

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.9876 0.0044 185.33);
  --foreground: oklch(0.3079 0.0364 195.43);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.3079 0.0364 195.43);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.3079 0.0364 195.43);
  --primary: oklch(0.3978 0.0685 185.52);
  --primary-foreground: oklch(1 0 0);
  --secondary: oklch(0.8272 0.1869 120.28);
  --secondary-foreground: oklch(0.4968 0.0835 205.38);
  --muted: oklch(0.9585 0.0066 185.27);
  --muted-foreground: oklch(0.5873 0.0387 196.15);
  --accent: oklch(0.8284 0.1875 120.33);
  --accent-foreground: oklch(0.9219 0 0);
  --destructive: oklch(0.6514 0.2207 6.17);
  --destructive-foreground: oklch(1 0 0);
  --border: oklch(0.9214 0.0198 186.04);
  --input: oklch(0.9214 0.0198 186.04);
  --ring: oklch(0.684 0.127 176.83);
  --chart-1: oklch(0.684 0.127 176.83);
  --chart-2: oklch(0.699 0.1212 216.64);
  --chart-3: oklch(0.633 0.162 252.07);
  --chart-4: oklch(0.7494 0.1669 155.95);
  --chart-5: oklch(0.6856 0.1898 352.19);
  --sidebar: oklch(0.9804 0.005 185.32);
  --sidebar-foreground: oklch(0.4136 0.0437 195.6);
  --sidebar-primary: oklch(0.684 0.127 176.83);
  --sidebar-primary-foreground: oklch(1 0 0);
  --sidebar-accent: oklch(0.9537 0.0237 203.37);
  --sidebar-accent-foreground: oklch(0.5349 0.099 177.29);
  --sidebar-border: oklch(0.9326 0.0138 186.22);
  --sidebar-ring: oklch(0.684 0.127 176.83);
  --font-sans: Plus Jakarta Sans, Quicksand, system-ui, sans-serif;
  --font-serif: Chillax, Playfair Display, serif;
  --font-mono: Fira Code, monospace;
  --radius: 1rem;
  --spacing: 0.25rem;
  --tracking-normal: -0.02em;
  --shadow-color: oklch(0.3819 0.0556 181.69);
  --shadow-opacity: 0.08;
  --shadow-blur: 20px;
  --shadow-spread: -2px;
  --shadow-offset-x: 0px;
  --shadow-offset-y: 8px;
  --shadow-2xs: 0px 8px 20px -2px hsl(171 50% 20% / 0.04);
  --shadow-xs: 0px 8px 20px -2px hsl(171 50% 20% / 0.04);
  --shadow-sm: 0px 8px 20px -2px hsl(171 50% 20% / 0.08), 0px 1px 2px -3px hsl(171 50% 20% / 0.08);
  --shadow: 0px 8px 20px -2px hsl(171 50% 20% / 0.08), 0px 1px 2px -3px hsl(171 50% 20% / 0.08);
  --shadow-md: 0px 8px 20px -2px hsl(171 50% 20% / 0.08), 0px 2px 4px -3px hsl(171 50% 20% / 0.08);
  --shadow-lg: 0px 8px 20px -2px hsl(171 50% 20% / 0.08), 0px 4px 6px -3px hsl(171 50% 20% / 0.08);
  --shadow-xl: 0px 8px 20px -2px hsl(171 50% 20% / 0.08), 0px 8px 10px -3px hsl(171 50% 20% / 0.08);
  --shadow-2xl: 0px 8px 20px -2px hsl(171 50% 20% / 0.20);
}

.dark {
  --background: oklch(0.1592 0.0163 195.64);
  --foreground: oklch(0.9724 0.0044 185.33);
  --card: oklch(0.2032 0.0218 195.57);
  --card-foreground: oklch(0.9724 0.0044 185.33);
  --popover: oklch(0.2032 0.0218 195.57);
  --popover-foreground: oklch(0.9724 0.0044 185.33);
  --primary: oklch(0.8607 0.1582 177.3);
  --primary-foreground: oklch(0.1752 0.0187 195.58);
  --secondary: oklch(0.3004 0.0342 203.23);
  --secondary-foreground: oklch(0.9527 0.0434 203.24);
  --muted: oklch(0.2601 0.0242 195.77);
  --muted-foreground: oklch(0.7768 0.0173 184.86);
  --accent: oklch(0.3002 0.0389 212.61);
  --accent-foreground: oklch(0.9448 0.0408 211.11);
  --destructive: oklch(0.552 0.2107 10.5);
  --destructive-foreground: oklch(1 0 0);
  --border: oklch(0.3331 0.0335 195.66);
  --input: oklch(0.3331 0.0335 195.66);
  --ring: oklch(0.8607 0.1582 177.3);
  --chart-1: oklch(0.8607 0.1582 177.3);
  --chart-2: oklch(0.7741 0.1272 215.1);
  --chart-3: oklch(0.708 0.1276 250.07);
  --chart-4: oklch(0.7958 0.174 156.26);
  --chart-5: oklch(0.7228 0.1644 350.74);
  --sidebar: oklch(0.1426 0.0142 195.68);
  --sidebar-foreground: oklch(0.927 0.0056 185.29);
  --sidebar-primary: oklch(0.8607 0.1582 177.3);
  --sidebar-primary-foreground: oklch(0.1752 0.0187 195.58);
  --sidebar-accent: oklch(0.2556 0.0226 203.12);
  --sidebar-accent-foreground: oklch(0.9786 0.0243 185.96);
  --sidebar-border: oklch(0.2601 0.0242 195.77);
  --sidebar-ring: oklch(0.8607 0.1582 177.3);
  --font-sans: Plus Jakarta Sans, Quicksand, system-ui, sans-serif;
  --font-serif: Chillax, Playfair Display, serif;
  --font-mono: Fira Code, monospace;
  --radius: 1rem;
  --spacing: 0.25rem;
  --tracking-normal: -0.02em;
  --shadow-color: oklch(0 0 0);
  --shadow-opacity: 0.4;
  --shadow-blur: 25px;
  --shadow-spread: 0px;
  --shadow-offset-x: 0px;
  --shadow-offset-y: 10px;
  --shadow-2xs: 0px 10px 25px 0px hsl(0 0% 0% / 0.20);
  --shadow-xs: 0px 10px 25px 0px hsl(0 0% 0% / 0.20);
  --shadow-sm: 0px 10px 25px 0px hsl(0 0% 0% / 0.40), 0px 1px 2px -1px hsl(0 0% 0% / 0.40);
  --shadow: 0px 10px 25px 0px hsl(0 0% 0% / 0.40), 0px 1px 2px -1px hsl(0 0% 0% / 0.40);
  --shadow-md: 0px 10px 25px 0px hsl(0 0% 0% / 0.40), 0px 2px 4px -1px hsl(0 0% 0% / 0.40);
  --shadow-lg: 0px 10px 25px 0px hsl(0 0% 0% / 0.40), 0px 4px 6px -1px hsl(0 0% 0% / 0.40);
  --shadow-xl: 0px 10px 25px 0px hsl(0 0% 0% / 0.40), 0px 8px 10px -1px hsl(0 0% 0% / 0.40);
  --shadow-2xl: 0px 10px 25px 0px hsl(0 0% 0% / 1.00);
}

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