Founding price: $35, then $99

Get Pro
Get Pro
All themes

Neutral themeFree

Pure greys with no tint. The shadcn/ui default base colour. Part of shadcn/ui base colours. Radius 0.625rem.

Compare in the gallery

Live preview

Create an account

Enter your email below to create your account.

or continue with

Team

Seats used this billing period.

  • OM

    Olivia Martin

    Owner
  • JL

    Jackson Lee

    Developer
  • IN

    Isabella Nguyen

    Designer

Traffic

Visitors by source

48,204+12.4%
  • Direct
  • Search
  • Social
  • Email
  • Referral
SD

Sofia Davis

m@example.com

Hi, how can I help you today?

Hey, I'm having trouble with my account.

What seems to be the problem?

I can't log in.

Popular

Team

$29/ month

Everything a growing team needs to ship together.

  • Unlimited projects
  • Shared workspaces
  • Priority support
  • Audit log

Notifications

Choose what you hear about.

Alert volume64%

Payments

Manage your recent payments.

SelectStatusEmailAmount
Successken99@example.com$316.00
Successabe45@example.com$242.00
Processingmonserrat44@example.com$837.00
Failedcarmella@example.com$721.00

1 of 4 row(s) selected.

Install

The CLI writes these variables into your global stylesheet. Every component reads them, so the whole app changes at once.

shadcn CLI
npx shadcn@latest add https://ui.tealmac.com/r/themes/shadcn-neutral.json
Or paste the CSS into globals.css
:root {
  --radius: 0.625rem;
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --chart-1: oklch(0.87 0 0);
  --chart-2: oklch(0.556 0 0);
  --chart-3: oklch(0.439 0 0);
  --chart-4: oklch(0.371 0 0);
  --chart-5: oklch(0.269 0 0);
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.205 0 0);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);
}

.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.205 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.205 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.922 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.704 0.191 22.216);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.556 0 0);
  --chart-1: oklch(0.87 0 0);
  --chart-2: oklch(0.556 0 0);
  --chart-3: oklch(0.439 0 0);
  --chart-4: oklch(0.371 0 0);
  --chart-5: oklch(0.269 0 0);
  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(1 0 0 / 10%);
  --sidebar-ring: oklch(0.556 0 0);
}

Export the tokens

The same theme as Tailwind v4 CSS, plain CSS variables, SCSS, JavaScript, TypeScript, DTCG design tokens, Figma variables and starter files for Swift, Android, Jetpack Compose and Flutter.

Download globals.css
Tailwind v4: globals.css
/* Neutral (shadcn-neutral) */
@import "tailwindcss";

@custom-variant dark (&:is(.dark *));

:root {
  --radius: 0.625rem;
  --spacing: 0.25rem;
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --chart-1: oklch(0.87 0 0);
  --chart-2: oklch(0.556 0 0);
  --chart-3: oklch(0.439 0 0);
  --chart-4: oklch(0.371 0 0);
  --chart-5: oklch(0.269 0 0);
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.205 0 0);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);
  --shadow-2xs: 0px 0px 0px 0px oklch(0 0 0 / 0%);
  --shadow-xs: 0px 0px 0px 0px oklch(0 0 0 / 0%);
  --shadow-sm: 0px 0px 0px 0px oklch(0 0 0 / 0%);
  --shadow-md: 0px 0px 0px 0px oklch(0 0 0 / 0%);
  --shadow-lg: 0px 0px 0px 0px oklch(0 0 0 / 0%);
  --shadow-xl: 0px 0px 0px 0px oklch(0 0 0 / 0%);
}

.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.205 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.205 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.922 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.704 0.191 22.216);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.556 0 0);
  --chart-1: oklch(0.87 0 0);
  --chart-2: oklch(0.556 0 0);
  --chart-3: oklch(0.439 0 0);
  --chart-4: oklch(0.371 0 0);
  --chart-5: oklch(0.269 0 0);
  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(1 0 0 / 10%);
  --sidebar-ring: oklch(0.556 0 0);
  --shadow-2xs: 0px 0px 0px 0px oklch(0 0 0 / 0%);
  --shadow-xs: 0px 0px 0px 0px oklch(0 0 0 / 0%);
  --shadow-sm: 0px 0px 0px 0px oklch(0 0 0 / 0%);
  --shadow-md: 0px 0px 0px 0px oklch(0 0 0 / 0%);
  --shadow-lg: 0px 0px 0px 0px oklch(0 0 0 / 0%);
  --shadow-xl: 0px 0px 0px 0px oklch(0 0 0 / 0%);
}

@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-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);
  --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-md: var(--shadow-md);
  --shadow-lg: var(--shadow-lg);
  --shadow-xl: var(--shadow-xl);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}

Contrast report

Measured contrast of every pair. This preset predates the theme gates and is shown as it is.

light mode
PairRatioResult
Text on background19.79:1 / 4.5:1Pass
Text on cards19.79:1 / 4.5:1Pass
Popover text19.79:1 / 4.5:1Pass
Muted text on muted4.34:1 / 4.5:1Fail
Muted text on background4.73:1 / 4.5:1Pass
Primary button text17.16:1 / 4.5:1Pass
Secondary button text16.42:1 / 4.5:1Pass
Accent label16.42:1 / 4.5:1Pass
Sidebar text18.96:1 / 4.5:1Pass
Sidebar active item17.16:1 / 4.5:1Pass
Sidebar hover item16.42:1 / 4.5:1Pass
Primary on background17.91:1 / 3:1Pass
Focus ring on background2.59:1 / 3:1Fail
Destructive on background4.91:1 / 4.5:1Pass
Destructive on cards4.91:1 / 4.5:1Pass
dark mode
PairRatioResult
Text on background18.96:1 / 4.5:1Pass
Text on cards17.16:1 / 4.5:1Pass
Popover text17.16:1 / 4.5:1Pass
Muted text on muted5.83:1 / 4.5:1Pass
Muted text on background7.63:1 / 4.5:1Pass
Primary button text14.22:1 / 4.5:1Pass
Secondary button text14.48:1 / 4.5:1Pass
Accent label14.48:1 / 4.5:1Pass
Sidebar text17.16:1 / 4.5:1Pass
Sidebar active item6.54:1 / 4.5:1Pass
Sidebar hover item14.48:1 / 4.5:1Pass
Primary on background15.72:1 / 3:1Pass
Focus ring on background4.18:1 / 3:1Pass
Destructive on background6.89:1 / 4.5:1Pass
Destructive on cards6.24:1 / 4.5:1Pass

Similar themes

The closest themes by colour, measured in OKLab across the key tokens in light and dark.

More from shadcn/ui base colours

Back to all themes