shadcnthemes
Create theme
All themes

Resume

Resume is an orange shadcn/ui theme with pill corners and sans-serif typography, in light and dark modes.

OrangeHigh contrastPill-shapedInter
Sans
Inter
Serif
System
Mono
JetBrains Mono
Radius
1rem
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 · System
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.9892 0.0054 117.92);
  --foreground: oklch(0.2077 0.0398 265.75);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.2077 0.0398 265.75);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.2077 0.0398 265.75);
  --primary: oklch(0.7049 0.1867 47.6);
  --primary-foreground: oklch(0 0 0);
  --secondary: oklch(0.3717 0.0392 257.29);
  --secondary-foreground: oklch(0.9842 0.0034 247.86);
  --muted: oklch(0.9683 0.0069 247.9);
  --muted-foreground: oklch(0.5544 0.0407 257.42);
  --accent: oklch(0.9796 0.0158 73.68);
  --accent-foreground: oklch(0.4698 0.143 37.3);
  --destructive: oklch(0.6368 0.2078 25.33);
  --destructive-foreground: oklch(1 0 0);
  --border: oklch(0.9288 0.0126 255.51);
  --input: oklch(0.9288 0.0126 255.51);
  --ring: oklch(0.7049 0.1867 47.6);
  --chart-1: oklch(0.7576 0.159 55.93);
  --chart-2: oklch(0.3717 0.0392 257.29);
  --chart-3: oklch(0.6461 0.1943 41.12);
  --chart-4: oklch(0.5544 0.0407 257.42);
  --chart-5: oklch(0.7107 0.0351 256.79);
  --sidebar: oklch(1 0 0);
  --sidebar-foreground: oklch(0.2077 0.0398 265.75);
  --sidebar-primary: oklch(0.8871 0.2122 128.5);
  --sidebar-primary-foreground: oklch(0 0 0);
  --sidebar-accent: oklch(0.9842 0.0034 247.86);
  --sidebar-accent-foreground: oklch(0.2077 0.0398 265.75);
  --sidebar-border: oklch(0.9683 0.0069 247.9);
  --sidebar-ring: oklch(0.8871 0.2122 128.5);
  --font-sans: Inter, system-ui, sans-serif;
  --font-serif: Georgia, serif;
  --font-mono: JetBrains Mono, monospace;
  --radius: 1rem;
  --spacing: 0.25rem;
  --tracking-normal: -0.01em;
  --shadow-color: oklch(0 0 0);
  --shadow-opacity: 0.05;
  --shadow-blur: 20px;
  --shadow-spread: 0px;
  --shadow-offset-x: 0px;
  --shadow-offset-y: 8px;
  --shadow-2xs: 0px 8px 20px 0px hsl(0 0% 0% / 0.03);
  --shadow-xs: 0px 8px 20px 0px hsl(0 0% 0% / 0.03);
  --shadow-sm: 0px 8px 20px 0px hsl(0 0% 0% / 0.05), 0px 1px 2px -1px hsl(0 0% 0% / 0.05);
  --shadow: 0px 8px 20px 0px hsl(0 0% 0% / 0.05), 0px 1px 2px -1px hsl(0 0% 0% / 0.05);
  --shadow-md: 0px 8px 20px 0px hsl(0 0% 0% / 0.05), 0px 2px 4px -1px hsl(0 0% 0% / 0.05);
  --shadow-lg: 0px 8px 20px 0px hsl(0 0% 0% / 0.05), 0px 4px 6px -1px hsl(0 0% 0% / 0.05);
  --shadow-xl: 0px 8px 20px 0px hsl(0 0% 0% / 0.05), 0px 8px 10px -1px hsl(0 0% 0% / 0.05);
  --shadow-2xl: 0px 8px 20px 0px hsl(0 0% 0% / 0.13);
}

.dark {
  --background: oklch(0.1288 0.0406 264.7);
  --foreground: oklch(0.9842 0.0034 247.86);
  --card: oklch(0.2077 0.0398 265.75);
  --card-foreground: oklch(0.9842 0.0034 247.86);
  --popover: oklch(0.2077 0.0398 265.75);
  --popover-foreground: oklch(0.9842 0.0034 247.86);
  --primary: oklch(0.8871 0.2122 128.5);
  --primary-foreground: oklch(0 0 0);
  --secondary: oklch(0.2795 0.0368 260.03);
  --secondary-foreground: oklch(0.9842 0.0034 247.86);
  --muted: oklch(0.2795 0.0368 260.03);
  --muted-foreground: oklch(0.7107 0.0351 256.79);
  --accent: oklch(0.3925 0.0896 152.54);
  --accent-foreground: oklch(0.8871 0.2122 128.5);
  --destructive: oklch(0.4437 0.1613 26.9);
  --destructive-foreground: oklch(1 0 0);
  --border: oklch(0.2795 0.0368 260.03);
  --input: oklch(0.2795 0.0368 260.03);
  --ring: oklch(0.8871 0.2122 128.5);
  --chart-1: oklch(0.8871 0.2122 128.5);
  --chart-2: oklch(0.6231 0.188 259.81);
  --chart-3: oklch(0.7227 0.192 149.58);
  --chart-4: oklch(0.6268 0.2325 303.9);
  --chart-5: oklch(0.7686 0.1647 70.08);
  --sidebar: oklch(0.1288 0.0406 264.7);
  --sidebar-foreground: oklch(0.9842 0.0034 247.86);
  --sidebar-primary: oklch(0.8871 0.2122 128.5);
  --sidebar-primary-foreground: oklch(0 0 0);
  --sidebar-accent: oklch(0.2795 0.0368 260.03);
  --sidebar-accent-foreground: oklch(0.9842 0.0034 247.86);
  --sidebar-border: oklch(0.2795 0.0368 260.03);
  --sidebar-ring: oklch(0.8871 0.2122 128.5);
  --font-sans: Inter, system-ui, sans-serif;
  --font-serif: Georgia, serif;
  --font-mono: JetBrains Mono, monospace;
  --radius: 1rem;
  --spacing: 0.25rem;
  --tracking-normal: -0.01em;
  --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);
  }
}

Similar themes