Cyberpunk Shadcn Theme
Futuristic cyberpunk theme with electric pink accents and deep purple backgrounds for shadcn/ui. Neon-soaked sci-fi aesthetic. TypeScript ready.
Powered by
Working with shadcn themes?
Join our Discord community for help from other shadcn developers working with themes and design systems.
Cyberpunk Shadcn Theme
Tired of themes that slap some purple gradients on gray and call it "cyberpunk." This theme actually captures that neon-soaked, high-tech aesthetic with proper electric pink and deep purple backgrounds that don't make your eyes bleed.
Perfect for gaming platforms, tech startups, developer tools, or any React project where you want that futuristic edge without looking like a 90s GeoCities page. The Outfit and Fira Code fonts really sell the high-tech vibe.
Installation
npx shadcn@latest add https://www.shadcn.io/registry/cyberpunk.jsonnpx shadcn@latest add https://www.shadcn.io/registry/cyberpunk.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/cyberpunk.jsonbunx shadcn@latest add https://www.shadcn.io/registry/cyberpunk.jsonOriginal theme by tweakcn.com
CSS Variables
Copy and paste the following CSS variables into your global CSS file:
:root {
--background: oklch(0.9816 0.0017 247.8390);
--foreground: oklch(0.1649 0.0352 281.8285);
--card: oklch(1.0000 0 0);
--card-foreground: oklch(0.1649 0.0352 281.8285);
--popover: oklch(1.0000 0 0);
--popover-foreground: oklch(0.1649 0.0352 281.8285);
--primary: oklch(0.6726 0.2904 341.4084);
--primary-foreground: oklch(1.0000 0 0);
--secondary: oklch(0.9595 0.0200 286.0164);
--secondary-foreground: oklch(0.1649 0.0352 281.8285);
--muted: oklch(0.9595 0.0200 286.0164);
--muted-foreground: oklch(0.1649 0.0352 281.8285);
--accent: oklch(0.8903 0.1739 171.2690);
--accent-foreground: oklch(0.1649 0.0352 281.8285);
--destructive: oklch(0.6535 0.2348 34.0370);
--border: oklch(0.9205 0.0086 225.0878);
--input: oklch(0.9205 0.0086 225.0878);
--ring: oklch(0.6726 0.2904 341.4084);
--chart-1: oklch(0.6726 0.2904 341.4084);
--chart-2: oklch(0.5488 0.2944 299.0954);
--chart-3: oklch(0.8442 0.1457 209.2851);
--chart-4: oklch(0.8903 0.1739 171.2690);
--chart-5: oklch(0.9168 0.1915 101.4070);
--sidebar: oklch(0.9595 0.0200 286.0164);
--sidebar-foreground: oklch(0.1649 0.0352 281.8285);
--sidebar-primary: oklch(0.6726 0.2904 341.4084);
--sidebar-primary-foreground: oklch(1.0000 0 0);
--sidebar-accent: oklch(0.8903 0.1739 171.2690);
--sidebar-accent-foreground: oklch(0.1649 0.0352 281.8285);
--sidebar-border: oklch(0.9205 0.0086 225.0878);
--sidebar-ring: oklch(0.6726 0.2904 341.4084);
--destructive-foreground: oklch(1.0000 0 0);
--font-sans: Outfit, sans-serif;
--font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
--font-mono: Fira Code, monospace;
--radius: 0.5rem;
--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.1649 0.0352 281.8285);
--foreground: oklch(0.9513 0.0074 260.7315);
--card: oklch(0.2542 0.0611 281.1423);
--card-foreground: oklch(0.9513 0.0074 260.7315);
--popover: oklch(0.2542 0.0611 281.1423);
--popover-foreground: oklch(0.9513 0.0074 260.7315);
--primary: oklch(0.6726 0.2904 341.4084);
--primary-foreground: oklch(1.0000 0 0);
--secondary: oklch(0.2542 0.0611 281.1423);
--secondary-foreground: oklch(0.9513 0.0074 260.7315);
--muted: oklch(0.2542 0.0611 281.1423);
--muted-foreground: oklch(0.6245 0.0500 278.1046);
--accent: oklch(0.8903 0.1739 171.2690);
--accent-foreground: oklch(0.1649 0.0352 281.8285);
--destructive: oklch(0.6535 0.2348 34.0370);
--border: oklch(0.3279 0.0832 280.7890);
--input: oklch(0.3279 0.0832 280.7890);
--ring: oklch(0.6726 0.2904 341.4084);
--chart-1: oklch(0.6726 0.2904 341.4084);
--chart-2: oklch(0.5488 0.2944 299.0954);
--chart-3: oklch(0.8442 0.1457 209.2851);
--chart-4: oklch(0.8903 0.1739 171.2690);
--chart-5: oklch(0.9168 0.1915 101.4070);
--sidebar: oklch(0.1649 0.0352 281.8285);
--sidebar-foreground: oklch(0.9513 0.0074 260.7315);
--sidebar-primary: oklch(0.6726 0.2904 341.4084);
--sidebar-primary-foreground: oklch(1.0000 0 0);
--sidebar-accent: oklch(0.8903 0.1739 171.2690);
--sidebar-accent-foreground: oklch(0.1649 0.0352 281.8285);
--sidebar-border: oklch(0.3279 0.0832 280.7890);
--sidebar-ring: oklch(0.6726 0.2904 341.4084);
--destructive-foreground: oklch(1.0000 0 0);
--font-sans: Outfit, sans-serif;
--font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
--font-mono: Fira Code, monospace;
--radius: 0.5rem;
--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
After trying probably 30 different "cyberpunk" themes that either look like a unicorn exploded or hurt your retinas, this one gets the aesthetic right. The electric pink is vibrant without being aggressive, and the deep purples create that neon-lit atmosphere without making text unreadable.
Real cyberpunk UI design is about precision and high contrast, not just throwing neon colors everywhere. This theme captures that clean, high-tech feeling while maintaining the visual impact that makes cyberpunk interfaces so compelling.
Dark mode is where this theme really shines—literally. The deep purple backgrounds with electric pink accents create that authentic cyberpunk atmosphere. Light mode tones things down with softer purples, so it's actually usable for day-to-day work.
What's actually in this theme
Dead simple setup—copy the CSS variables into your globals.css and you're done. The Outfit and Fira Code fonts give you that futuristic tech aesthetic without looking like Comic Sans in a rave.
The electric pink primary is that perfect cyberpunk accent—bright enough to command attention but not so intense it causes eye strain. The purple and cyan accents create depth without overwhelming the interface. All contrast ratios pass WCAG AA standards so you won't run into accessibility issues.
Since it uses standard shadcn color tokens, your TypeScript autocomplete for bg-primary, text-foreground, etc. just works. No custom type definitions or weird workarounds.
How to use this in projects
The electric pink is for CTAs, active states, and anything that needs to feel "charged" or important. Use it sparingly—real cyberpunk interfaces are about strategic use of neon, not turning everything into a disco.
The purple and cyan should handle most of your secondary elements and data visualization. The key is creating that layered, high-tech feeling where different elements have different visual weights.
In practice, this theme works best for gaming platforms, developer tools, creative apps, or any interface where you want users to feel like they're using something from the future. The rounded corners keep it modern while the colors sell the sci-fi vibe.
You might also like
Dark Matter Theme
Deep space inspired dark theme with cosmic vibes
Violet Theme
Electric violet theme with futuristic appeal
Blue Theme
Electric blue theme with digital aesthetics
Graphite Theme
Dark graphite theme with industrial feel
Mono Theme
Stark monochromatic theme with high contrast
Twitter Theme
Social media inspired theme with blue accents
FAQ
Claymorphism Shadcn Theme
Claymorphism-inspired theme with soft organic clay tones for shadcn/ui. Modern clay aesthetic with tactile design elements. TypeScript ready.
Ghibli Studio Shadcn Theme
Studio Ghibli inspired theme with warm earth tones and gentle greens for shadcn/ui. Whimsical nature-inspired design with organic feel. TypeScript ready.