Red Shadcn Theme
Bold red theme with energetic passion for shadcn/ui. Strong primary color design with confident crimson accents. TypeScript ready.
Powered by
Working with shadcn themes?
Join our Discord community for help from other shadcn developers working with themes and design systems.
Red Shadcn Theme
Building interfaces that need to grab attention and convey urgency, realized that red done right isn't aggressive—it's confident. This theme uses that powerful crimson energy to create interfaces that feel bold and decisive without being overwhelming. The kind of red that commands attention but still feels trustworthy and professional.
Perfect for emergency applications, high-priority dashboards, alert systems, or any React project where immediate action and clear urgency matter. The balanced approach makes critical interfaces feel serious without being intimidating.
Installation
npx shadcn@latest add https://www.shadcn.io/registry/red.jsonnpx shadcn@latest add https://www.shadcn.io/registry/red.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/red.jsonbunx shadcn@latest add https://www.shadcn.io/registry/red.jsonOriginal theme by tweakcn.com
CSS Variables
Copy and paste the following CSS variables into your global CSS file:
:root {
--background: oklch(1 0 0);
--foreground: oklch(0.141 0.005 285.823);
--card: oklch(1 0 0);
--card-foreground: oklch(0.141 0.005 285.823);
--popover: oklch(1 0 0);
--popover-foreground: oklch(0.141 0.005 285.823);
--primary: oklch(0.637 0.237 25.331);
--primary-foreground: oklch(0.971 0.013 17.38);
--secondary: oklch(0.967 0.001 286.375);
--secondary-foreground: oklch(0.21 0.006 285.885);
--muted: oklch(0.967 0.001 286.375);
--muted-foreground: oklch(0.552 0.016 285.938);
--accent: oklch(0.967 0.001 286.375);
--accent-foreground: oklch(0.21 0.006 285.885);
--destructive: oklch(0.577 0.245 27.325);
--border: oklch(0.92 0.004 286.32);
--input: oklch(0.92 0.004 286.32);
--ring: oklch(0.637 0.237 25.331);
--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 0);
--sidebar-foreground: oklch(0.141 0.005 285.823);
--sidebar-primary: oklch(0.637 0.237 25.331);
--sidebar-primary-foreground: oklch(0.971 0.013 17.38);
--sidebar-accent: oklch(0.967 0.001 286.375);
--sidebar-accent-foreground: oklch(0.21 0.006 285.885);
--sidebar-border: oklch(0.92 0.004 286.32);
--sidebar-ring: oklch(0.637 0.237 25.331);
--destructive-foreground: oklch(1.0000 0 0);
--font-sans: Inter, sans-serif;
--font-serif: Lora, serif;
--font-mono: JetBrains Mono, monospace;
--radius: 0.65rem;
--shadow-2xs: 0px 4px 8px -1px hsl(0 0% 0% / 0.05);
--shadow-xs: 0px 4px 8px -1px hsl(0 0% 0% / 0.05);
--shadow-sm: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 1px 2px -2px hsl(0 0% 0% / 0.10);
--shadow: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 1px 2px -2px hsl(0 0% 0% / 0.10);
--shadow-md: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 2px 4px -2px hsl(0 0% 0% / 0.10);
--shadow-lg: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 4px 6px -2px hsl(0 0% 0% / 0.10);
--shadow-xl: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 8px 10px -2px hsl(0 0% 0% / 0.10);
--shadow-2xl: 0px 4px 8px -1px hsl(0 0% 0% / 0.25);
--tracking-normal: 0em;
--spacing: 0.25rem;
}
.dark {
--background: oklch(0.141 0.005 285.823);
--foreground: oklch(0.985 0 0);
--card: oklch(0.21 0.006 285.885);
--card-foreground: oklch(0.985 0 0);
--popover: oklch(0.21 0.006 285.885);
--popover-foreground: oklch(0.985 0 0);
--primary: oklch(0.637 0.237 25.331);
--primary-foreground: oklch(0.971 0.013 17.38);
--secondary: oklch(0.274 0.006 286.033);
--secondary-foreground: oklch(0.985 0 0);
--muted: oklch(0.274 0.006 286.033);
--muted-foreground: oklch(0.705 0.015 286.067);
--accent: oklch(0.274 0.006 286.033);
--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.637 0.237 25.331);
--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.006 285.885);
--sidebar-foreground: oklch(0.985 0 0);
--sidebar-primary: oklch(0.637 0.237 25.331);
--sidebar-primary-foreground: oklch(0.971 0.013 17.38);
--sidebar-accent: oklch(0.274 0.006 286.033);
--sidebar-accent-foreground: oklch(0.985 0 0);
--sidebar-border: oklch(1 0 0 / 10%);
--sidebar-ring: oklch(0.637 0.237 25.331);
--destructive-foreground: oklch(1.0000 0 0);
--font-sans: Inter, sans-serif;
--font-serif: Lora, serif;
--font-mono: JetBrains Mono, monospace;
--radius: 0.65rem;
--shadow-2xs: 0px 4px 8px -1px hsl(0 0% 0% / 0.05);
--shadow-xs: 0px 4px 8px -1px hsl(0 0% 0% / 0.05);
--shadow-sm: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 1px 2px -2px hsl(0 0% 0% / 0.10);
--shadow: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 1px 2px -2px hsl(0 0% 0% / 0.10);
--shadow-md: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 2px 4px -2px hsl(0 0% 0% / 0.10);
--shadow-lg: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 4px 6px -2px hsl(0 0% 0% / 0.10);
--shadow-xl: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 8px 10px -2px hsl(0 0% 0% / 0.10);
--shadow-2xl: 0px 4px 8px -1px hsl(0 0% 0% / 0.25);
}
@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);
--color-destructive-foreground: var(--destructive-foreground);
--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);
}Why this theme actually works
Red is the most psychologically powerful color—it triggers immediate attention and action responses. But most red themes either go too aggressive and feel alarming, or too muted and lose that decisive energy. This theme hits the sweet spot where red feels confident and authoritative without being overwhelming.
Working on emergency response systems and high-priority dashboards, learned that the right shade of red can make critical actions feel urgent without causing panic. This crimson red commands attention while maintaining the professionalism needed for serious applications.
Dark mode transforms the red into something more sophisticated while keeping that immediate impact. The crimson becomes more elegant against dark backgrounds, creating interfaces that feel both urgent and refined—perfect for systems that need to convey both importance and trustworthiness.
What's actually in this theme
Dead simple setup—copy the CSS variables into your globals.css and you're done. The Inter font provides clean readability that balances the bold red primary, ensuring that important information remains clear even when emotions are running high.
That confident crimson is perfect for critical actions and urgent calls-to-action—"Emergency," "Alert," "Critical Update," "Take Action Now." The clean backgrounds ensure the red stands out without overwhelming the interface or making it feel chaotic.
All contrast ratios pass WCAG AA standards because accessibility is crucial when dealing with urgent or emergency interfaces. Since it uses standard shadcn color tokens, your TypeScript autocomplete for bg-primary, text-foreground, etc. works perfectly.
How to use this in projects
The bold red should mark critical actions and high-priority elements—anything that requires immediate attention or decisive action. Use the confident aesthetic to create environments where urgency feels controlled and professional rather than panicked.
This works especially well for emergency applications, monitoring dashboards, alert systems, or any interface where urgent action and clear priorities matter more than subtle design. Think mission control, not art gallery.
In practice, embrace the decisive energy this palette creates. The strong red against clean backgrounds reduces hesitation and guides users toward important actions quickly and confidently—exactly what you want in high-stakes situations.
You might also like
Rose Theme
Elegant rose theme with softer pink warmth
Tangerine Theme
Fresh citrus theme with warm orange energy
Valorant Theme
Tactical shooter theme with bold red accents
Orange Theme
Pure orange theme with vibrant energy
Corporate Theme
Professional corporate theme with authoritative presence
Claymorphism Theme
Organic clay theme with warm earthtone accents
FAQ
VS Code Shadcn Theme
Professional VS Code inspired theme with familiar blue tones for shadcn/ui. Developer-friendly design with Source Code Pro fonts. TypeScript ready.
Tangerine Shadcn Theme
Fresh citrus theme with vibrant orange energy for shadcn/ui. Bright organic design with natural juice-inspired vibes. TypeScript ready.