All themes
Gray themeFree
Blue-leaning greys from the shadcn/ui base colours. Part of shadcn/ui base colours. Radius 0.625rem.
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%
Jan
Feb
Mar
Apr
May
Jun
Jul
- Direct
- Search
- Social
- 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.
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.
| Select | Status | Amount | |
|---|---|---|---|
| Success | ken99@example.com | $316.00 | |
| Success | abe45@example.com | $242.00 | |
| Processing | monserrat44@example.com | $837.00 | |
| Failed | carmella@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.
npx shadcn@latest add https://ui.tealmac.com/r/themes/shadcn-gray.json:root {
--radius: 0.625rem;
--background: oklch(1 0 0);
--foreground: oklch(0.13 0.028 261.692);
--card: oklch(1 0 0);
--card-foreground: oklch(0.13 0.028 261.692);
--popover: oklch(1 0 0);
--popover-foreground: oklch(0.13 0.028 261.692);
--primary: oklch(0.21 0.034 264.665);
--primary-foreground: oklch(0.985 0.002 247.839);
--secondary: oklch(0.967 0.003 264.542);
--secondary-foreground: oklch(0.21 0.034 264.665);
--muted: oklch(0.967 0.003 264.542);
--muted-foreground: oklch(0.551 0.027 264.364);
--accent: oklch(0.967 0.003 264.542);
--accent-foreground: oklch(0.21 0.034 264.665);
--destructive: oklch(0.577 0.245 27.325);
--border: oklch(0.928 0.006 264.531);
--input: oklch(0.928 0.006 264.531);
--ring: oklch(0.707 0.022 261.325);
--chart-1: oklch(0.646 0.222 41.116);
--chart-2: oklch(0.6 0.118 184.704);
--chart-3: oklch(0.398 0.07 227.392);
--chart-4: oklch(0.828 0.189 84.429);
--chart-5: oklch(0.769 0.188 70.08);
--sidebar: oklch(0.985 0.002 247.839);
--sidebar-foreground: oklch(0.13 0.028 261.692);
--sidebar-primary: oklch(0.21 0.034 264.665);
--sidebar-primary-foreground: oklch(0.985 0.002 247.839);
--sidebar-accent: oklch(0.967 0.003 264.542);
--sidebar-accent-foreground: oklch(0.21 0.034 264.665);
--sidebar-border: oklch(0.928 0.006 264.531);
--sidebar-ring: oklch(0.707 0.022 261.325);
}
.dark {
--background: oklch(0.13 0.028 261.692);
--foreground: oklch(0.985 0.002 247.839);
--card: oklch(0.21 0.034 264.665);
--card-foreground: oklch(0.985 0.002 247.839);
--popover: oklch(0.21 0.034 264.665);
--popover-foreground: oklch(0.985 0.002 247.839);
--primary: oklch(0.928 0.006 264.531);
--primary-foreground: oklch(0.21 0.034 264.665);
--secondary: oklch(0.278 0.033 256.848);
--secondary-foreground: oklch(0.985 0.002 247.839);
--muted: oklch(0.278 0.033 256.848);
--muted-foreground: oklch(0.707 0.022 261.325);
--accent: oklch(0.278 0.033 256.848);
--accent-foreground: oklch(0.985 0.002 247.839);
--destructive: oklch(0.704 0.191 22.216);
--border: oklch(1 0 0 / 10%);
--input: oklch(1 0 0 / 15%);
--ring: oklch(0.551 0.027 264.364);
--chart-1: oklch(0.488 0.243 264.376);
--chart-2: oklch(0.696 0.17 162.48);
--chart-3: oklch(0.769 0.188 70.08);
--chart-4: oklch(0.627 0.265 303.9);
--chart-5: oklch(0.645 0.246 16.439);
--sidebar: oklch(0.21 0.034 264.665);
--sidebar-foreground: oklch(0.985 0.002 247.839);
--sidebar-primary: oklch(0.488 0.243 264.376);
--sidebar-primary-foreground: oklch(0.985 0.002 247.839);
--sidebar-accent: oklch(0.278 0.033 256.848);
--sidebar-accent-foreground: oklch(0.985 0.002 247.839);
--sidebar-border: oklch(1 0 0 / 10%);
--sidebar-ring: oklch(0.551 0.027 264.364);
}
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.
/* Gray (shadcn-gray) */
@import "tailwindcss";
@custom-variant dark (&:is(.dark *));
:root {
--radius: 0.625rem;
--spacing: 0.25rem;
--background: oklch(1 0 0);
--foreground: oklch(0.13 0.028 261.692);
--card: oklch(1 0 0);
--card-foreground: oklch(0.13 0.028 261.692);
--popover: oklch(1 0 0);
--popover-foreground: oklch(0.13 0.028 261.692);
--primary: oklch(0.21 0.034 264.665);
--primary-foreground: oklch(0.985 0.002 247.839);
--secondary: oklch(0.967 0.003 264.542);
--secondary-foreground: oklch(0.21 0.034 264.665);
--muted: oklch(0.967 0.003 264.542);
--muted-foreground: oklch(0.551 0.027 264.364);
--accent: oklch(0.967 0.003 264.542);
--accent-foreground: oklch(0.21 0.034 264.665);
--destructive: oklch(0.577 0.245 27.325);
--border: oklch(0.928 0.006 264.531);
--input: oklch(0.928 0.006 264.531);
--ring: oklch(0.707 0.022 261.325);
--chart-1: oklch(0.646 0.222 41.116);
--chart-2: oklch(0.6 0.118 184.704);
--chart-3: oklch(0.398 0.07 227.392);
--chart-4: oklch(0.828 0.189 84.429);
--chart-5: oklch(0.769 0.188 70.08);
--sidebar: oklch(0.985 0.002 247.839);
--sidebar-foreground: oklch(0.13 0.028 261.692);
--sidebar-primary: oklch(0.21 0.034 264.665);
--sidebar-primary-foreground: oklch(0.985 0.002 247.839);
--sidebar-accent: oklch(0.967 0.003 264.542);
--sidebar-accent-foreground: oklch(0.21 0.034 264.665);
--sidebar-border: oklch(0.928 0.006 264.531);
--sidebar-ring: oklch(0.707 0.022 261.325);
--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.13 0.028 261.692);
--foreground: oklch(0.985 0.002 247.839);
--card: oklch(0.21 0.034 264.665);
--card-foreground: oklch(0.985 0.002 247.839);
--popover: oklch(0.21 0.034 264.665);
--popover-foreground: oklch(0.985 0.002 247.839);
--primary: oklch(0.928 0.006 264.531);
--primary-foreground: oklch(0.21 0.034 264.665);
--secondary: oklch(0.278 0.033 256.848);
--secondary-foreground: oklch(0.985 0.002 247.839);
--muted: oklch(0.278 0.033 256.848);
--muted-foreground: oklch(0.707 0.022 261.325);
--accent: oklch(0.278 0.033 256.848);
--accent-foreground: oklch(0.985 0.002 247.839);
--destructive: oklch(0.704 0.191 22.216);
--border: oklch(1 0 0 / 10%);
--input: oklch(1 0 0 / 15%);
--ring: oklch(0.551 0.027 264.364);
--chart-1: oklch(0.488 0.243 264.376);
--chart-2: oklch(0.696 0.17 162.48);
--chart-3: oklch(0.769 0.188 70.08);
--chart-4: oklch(0.627 0.265 303.9);
--chart-5: oklch(0.645 0.246 16.439);
--sidebar: oklch(0.21 0.034 264.665);
--sidebar-foreground: oklch(0.985 0.002 247.839);
--sidebar-primary: oklch(0.488 0.243 264.376);
--sidebar-primary-foreground: oklch(0.985 0.002 247.839);
--sidebar-accent: oklch(0.278 0.033 256.848);
--sidebar-accent-foreground: oklch(0.985 0.002 247.839);
--sidebar-border: oklch(1 0 0 / 10%);
--sidebar-ring: oklch(0.551 0.027 264.364);
--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.
| Pair | Ratio | Result |
|---|---|---|
| Text on background | 20.13:1 / 4.5:1 | Pass |
| Text on cards | 20.13:1 / 4.5:1 | Pass |
| Popover text | 20.13:1 / 4.5:1 | Pass |
| Muted text on muted | 4.39:1 / 4.5:1 | Fail |
| Muted text on background | 4.84:1 / 4.5:1 | Pass |
| Primary button text | 17:1 / 4.5:1 | Pass |
| Secondary button text | 16.13:1 / 4.5:1 | Pass |
| Accent label | 16.13:1 / 4.5:1 | Pass |
| Sidebar text | 19.28:1 / 4.5:1 | Pass |
| Sidebar active item | 17:1 / 4.5:1 | Pass |
| Sidebar hover item | 16.13:1 / 4.5:1 | Pass |
| Primary on background | 17.75:1 / 3:1 | Pass |
| Focus ring on background | 2.6:1 / 3:1 | Fail |
| Destructive on background | 4.91:1 / 4.5:1 | Pass |
| Destructive on cards | 4.91:1 / 4.5:1 | Pass |
| Pair | Ratio | Result |
|---|---|---|
| Text on background | 19.28:1 / 4.5:1 | Pass |
| Text on cards | 17:1 / 4.5:1 | Pass |
| Popover text | 17:1 / 4.5:1 | Pass |
| Muted text on muted | 5.64:1 / 4.5:1 | Pass |
| Muted text on background | 7.73:1 / 4.5:1 | Pass |
| Primary button text | 14.35:1 / 4.5:1 | Pass |
| Secondary button text | 14.07:1 / 4.5:1 | Pass |
| Accent label | 14.07:1 / 4.5:1 | Pass |
| Sidebar text | 17:1 / 4.5:1 | Pass |
| Sidebar active item | 6.54:1 / 4.5:1 | Pass |
| Sidebar hover item | 14.07:1 / 4.5:1 | Pass |
| Primary on background | 16.28:1 / 3:1 | Pass |
| Focus ring on background | 4.16:1 / 3:1 | Pass |
| Destructive on background | 7.01:1 / 4.5:1 | Pass |
| Destructive on cards | 6.18:1 / 4.5:1 | Pass |