Marvel Shadcn Theme
Marvel Comics inspired theme with bold reds and heroic blues for shadcn/ui. Comic book aesthetic with strong visual impact. TypeScript ready.
Powered by
Working with shadcn themes?
Join our Discord community for help from other shadcn developers working with themes and design systems.
Marvel Shadcn Theme
Been a Marvel fan since the 90s and always loved how their visual branding just commands attention. This theme captures that same bold, heroic energy with those iconic reds and blues that make everything feel important and action-packed.
Perfect for gaming platforms, sports apps, fitness trackers, or any React project where you want that confident, high-energy feeling that gets users pumped up and ready to take action. The Outfit font adds to that modern superhero aesthetic.
Installation
npx shadcn@latest add https://www.shadcn.io/registry/marvel.jsonnpx shadcn@latest add https://www.shadcn.io/registry/marvel.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/marvel.jsonbunx shadcn@latest add https://www.shadcn.io/registry/marvel.jsonOriginal theme by tweakcn.com
CSS Variables
Copy and paste the following CSS variables into your global CSS file:
:root {
--background: oklch(0.98 0.01 25.23);
--foreground: oklch(0.20 0.01 18.05);
--card: oklch(0.95 0.01 25.23);
--card-foreground: oklch(0.18 0.01 29.18);
--popover: oklch(0.94 0.01 25.23);
--popover-foreground: oklch(0.22 0.01 29.09);
--primary: oklch(0.55 0.22 27.03);
--primary-foreground: oklch(0.98 0.01 100.72);
--secondary: oklch(0.52 0.14 247.51);
--secondary-foreground: oklch(0.98 0.01 100.72);
--muted: oklch(0.91 0.01 25.23);
--muted-foreground: oklch(0.38 0.01 17.71);
--accent: oklch(0.86 0.04 33.03);
--accent-foreground: oklch(0.18 0.01 29.18);
--destructive: oklch(0.56 0.23 29.23);
--border: oklch(0.84 0.01 25.22);
--input: oklch(0.80 0.01 25.22);
--ring: oklch(0.50 0.12 244.86);
--chart-1: oklch(0.58 0.23 27.06);
--chart-2: oklch(0.61 0.18 251.95);
--chart-3: oklch(0.72 0.15 83.96);
--chart-4: oklch(0.67 0.15 144.89);
--chart-5: oklch(0.75 0.15 304.74);
--sidebar: oklch(0.97 0 0);
--sidebar-foreground: oklch(0.20 0.01 18.05);
--sidebar-primary: oklch(0.52 0.14 247.51);
--sidebar-primary-foreground: oklch(0.98 0.01 100.72);
--sidebar-accent: oklch(0.69 0.14 79.64);
--sidebar-accent-foreground: oklch(0.20 0.01 18.05);
--sidebar-border: oklch(0.87 0.01 25.23);
--sidebar-ring: oklch(0.52 0.14 247.51);
--destructive-foreground: oklch(1.0000 0 0);
--font-sans: Outfit, sans-serif;
--font-serif: Merriweather, serif;
--font-mono: Geist Mono, monospace;
--radius: 0rem;
--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;
}
.dark {
--background: oklch(0.12 0.01 38.49);
--foreground: oklch(0.95 0.01 25.23);
--card: oklch(0.18 0.01 29.18);
--card-foreground: oklch(0.95 0.01 25.23);
--popover: oklch(0.18 0.01 29.18);
--popover-foreground: oklch(0.95 0.01 25.23);
--primary: oklch(0.65 0.23 27.09);
--primary-foreground: oklch(0.98 0.01 100.72);
--secondary: oklch(0.50 0.14 249.16);
--secondary-foreground: oklch(0.98 0.01 100.72);
--muted: oklch(0.20 0.01 18.05);
--muted-foreground: oklch(0.70 0.01 25.22);
--accent: oklch(0.59 0.12 78.11);
--accent-foreground: oklch(0.95 0.01 25.23);
--destructive: oklch(0.56 0.23 29.23);
--border: oklch(0.38 0.01 17.71);
--input: oklch(0.38 0.01 17.71);
--ring: oklch(0.49 0.14 250.75);
--chart-1: oklch(0.64 0.25 26.85);
--chart-2: oklch(0.66 0.19 250.17);
--chart-3: oklch(0.78 0.16 87.01);
--chart-4: oklch(0.68 0.15 144.94);
--chart-5: oklch(0.75 0.15 304.74);
--sidebar: oklch(0.14 0.01 33.25);
--sidebar-foreground: oklch(0.95 0.01 25.23);
--sidebar-primary: oklch(0.50 0.14 249.16);
--sidebar-primary-foreground: oklch(0.98 0.01 100.72);
--sidebar-accent: oklch(0.59 0.12 78.11);
--sidebar-accent-foreground: oklch(0.95 0.01 25.23);
--sidebar-border: oklch(0.32 0.01 27.45 / 30%);
--sidebar-ring: oklch(0.50 0.14 249.16);
--destructive-foreground: oklch(1.0000 0 0);
--font-sans: Outfit, sans-serif;
--font-serif: Merriweather, serif;
--font-mono: Geist Mono, monospace;
--radius: 0rem;
--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
Marvel's been perfecting their visual identity for over 80 years, and they've figured out exactly which colors create that sense of power and heroism. The red-and-blue combination isn't random—it's the most universally recognized "hero" palette in Western culture.
Most comic book inspired themes either go full Saturday morning cartoon and look childish, or they try to be "edgy" with dark colors that miss the point entirely. Marvel's genius is making bold colors feel sophisticated and trustworthy rather than juvenile.
Dark mode maintains that heroic energy while becoming more comfortable for extended use. The red maintains its impact while the blue provides that trustworthy, dependable feeling that makes users confident in taking action.
What's actually in this theme
Dead simple setup—copy the CSS variables into your globals.css and you're done. The Outfit font gives you that modern superhero aesthetic without looking like a comic book font that's hard to read for UI text.
That bold red primary is perfect for CTAs that need to feel urgent and important—"Sign Up Now," "Start Your Journey," "Join the Fight." The blue secondary provides balance and trust, while the sharp corners keep everything feeling strong and decisive.
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.
How to use this in projects
The bold red should be your primary action color for high-impact moments—anything where you want users to feel empowered and take decisive action. Think fitness apps where you're motivating workouts, gaming platforms where competition drives engagement, or any app where confidence is key.
The blue secondary should provide that trustworthy foundation throughout the interface. Red grabs attention, blue builds trust. This combination works especially well for apps where users need to feel both excited and secure.
In practice, embrace the bold aesthetic but use it strategically. Too much red becomes overwhelming, so let the blue and neutral tones give users' eyes places to rest. The goal is sustained energy and confidence, not visual fatigue.
You might also like
Red Theme
Bold red theme with superhero energy
Blue Theme
Heroic blue theme with classic appeal
Valorant Theme
Tactical theme with bold orange accents
Cyberpunk Theme
Futuristic theme with electric colors
Orange Theme
Energetic orange theme with bold presence
Violet Theme
Dynamic violet theme with heroic feel
FAQ
Material Design Shadcn Theme
Google Material Design inspired theme with proper elevation and purple accents for shadcn/ui. Official design system feel with tested principles. TypeScript ready.
Spotify Shadcn Theme
Spotify-inspired theme with signature green accents and sleek dark interface for shadcn/ui. Music platform aesthetic with modern design. TypeScript ready.