Valorant Shadcn Theme
Valorant tactical shooter inspired theme with orange accents and sharp edges for shadcn/ui. Competitive gaming aesthetic with precision design. TypeScript ready.
Powered by
Working with shadcn themes?
Join our Discord community for help from other shadcn developers working with themes and design systems.
Valorant Shadcn Theme
Spent way too many hours in Valorant ranked and always loved how Riot nailed that tactical, precise aesthetic. The orange highlights against those sharp blacks create this perfect competitive energy—clean enough for pros but with just enough edge to feel intense.
Perfect for gaming platforms, esports dashboards, competitive apps, or any React project where you want that focused, high-performance feeling. The Barlow font gives you that tactical, no-nonsense typography that serious players expect.
Installation
npx shadcn@latest add https://www.shadcn.io/registry/valorant.jsonnpx shadcn@latest add https://www.shadcn.io/registry/valorant.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/valorant.jsonbunx shadcn@latest add https://www.shadcn.io/registry/valorant.jsonOriginal theme by tweakcn.com
CSS Variables
Copy and paste the following CSS variables into your global CSS file:
:root {
--background: oklch(0.97 0.02 12.78);
--foreground: oklch(0.24 0.07 17.81);
--card: oklch(0.98 0.01 17.28);
--card-foreground: oklch(0.26 0.07 19);
--popover: oklch(0.98 0.01 17.28);
--popover-foreground: oklch(0.26 0.07 19);
--primary: oklch(0.67 0.22 21.34);
--primary-foreground: oklch(0.99 0.00 359.99);
--secondary: oklch(0.95 0.02 11.28);
--secondary-foreground: oklch(0.24 0.07 17.81);
--muted: oklch(0.98 0.01 17.28);
--muted-foreground: oklch(0.26 0.07 19);
--accent: oklch(0.99 0.00 359.99);
--accent-foreground: oklch(0.43 0.13 20.62);
--destructive: oklch(0.80 0.17 73.27);
--border: oklch(0.91 0.05 11.40);
--input: oklch(0.90 0.05 12.59);
--ring: oklch(0.92 0.04 12.39);
--chart-1: oklch(0.86 0.18 88.49);
--chart-2: oklch(0.62 0.21 255.13);
--chart-3: oklch(0.54 0.29 297.82);
--chart-4: oklch(0.95 0.10 98.39);
--chart-5: oklch(0.87 0.12 100.28);
--sidebar: oklch(0.97 0.02 12.78);
--sidebar-foreground: oklch(0.26 0.07 19);
--sidebar-primary: oklch(0.67 0.22 21.34);
--sidebar-primary-foreground: oklch(0.98 0.01 17.28);
--sidebar-accent: oklch(0.98 0.01 17.28);
--sidebar-accent-foreground: oklch(0.43 0.13 20.62);
--sidebar-border: oklch(0.91 0.05 11.40);
--sidebar-ring: oklch(0.92 0.04 12.39);
--destructive-foreground: oklch(1.0000 0 0);
--font-sans: Barlow;
--font-serif: Merriweather;
--font-mono: JetBrains Mono;
--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.16 0.03 17.48);
--foreground: oklch(0.99 0.00 359.99);
--card: oklch(0.21 0.05 19.26);
--card-foreground: oklch(0.98 0 0);
--popover: oklch(0.26 0.07 19);
--popover-foreground: oklch(0.99 0.00 359.99);
--primary: oklch(0.67 0.22 21.34);
--primary-foreground: oklch(0.99 0.00 359.99);
--secondary: oklch(0.3 0.0891 19.6);
--secondary-foreground: oklch(0.95 0.02 11.28);
--muted: oklch(0.26 0.07 19);
--muted-foreground: oklch(0.99 0.00 359.99);
--accent: oklch(0.43 0.13 20.62);
--accent-foreground: oklch(0.99 0.00 359.99);
--destructive: oklch(0.80 0.17 73.27);
--border: oklch(0.31 0.09 19.80);
--input: oklch(0.39 0.12 20.37);
--ring: oklch(0.50 0.16 20.89);
--chart-1: oklch(0.86 0.18 88.49);
--chart-2: oklch(0.62 0.21 255.13);
--chart-3: oklch(0.54 0.29 297.82);
--chart-4: oklch(0.95 0.10 98.39);
--chart-5: oklch(0.87 0.12 100.28);
--sidebar: oklch(0.26 0.07 19);
--sidebar-foreground: oklch(0.99 0.00 359.99);
--sidebar-primary: oklch(0.67 0.22 21.34);
--sidebar-primary-foreground: oklch(0.99 0.00 359.99);
--sidebar-accent: oklch(0.43 0.13 20.62);
--sidebar-accent-foreground: oklch(0.99 0.00 359.99);
--sidebar-border: oklch(0.39 0.12 20.37);
--sidebar-ring: oklch(0.50 0.16 20.89);
--destructive-foreground: oklch(1.0000 0 0);
--font-sans: Barlow;
--font-serif: Merriweather;
--font-mono: JetBrains Mono;
--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
Riot's design team knows their audience. That orange isn't just any orange—it's the exact frequency that pops against dark backgrounds without causing eye strain during long gaming sessions. The zero border radius creates that tactical, no-nonsense feel that competitive players associate with precision and performance.
Most gaming themes go way overboard with neon colors and flashy effects that actually hurt usability. Valorant's aesthetic is the opposite—clean, focused, and designed for extended use. When you're tracking headshots for hours, you need an interface that gets out of the way.
Dark mode maintains that competitive edge while keeping everything readable. The orange highlights guide attention to critical actions—perfect for dashboards where split-second decisions matter. Light mode keeps the same tactical feel but works in office environments.
What's actually in this theme
Dead simple setup—copy the CSS variables into your globals.css and you're done. The Barlow font gives you that modern tactical typography that's legible at any size, perfect for data-heavy interfaces.
That Valorant orange is perfect for critical actions, active states, or anything that needs immediate attention. The sharp corners and clean lines create a precision feeling—no soft, rounded elements here. This is for interfaces that mean business.
All contrast ratios pass WCAG AA standards because competitive players need maximum clarity. 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 orange should mark critical actions and active states—"Fire," "Execute," "Confirm," anything that requires precision and immediate response. Think tactical rather than decorative. The clean whites and grays should dominate for maximum readability.
This works especially well for analytics dashboards, trading platforms, gaming interfaces, or any app where users need to make quick, accurate decisions under pressure. The aesthetic says "professional tool" rather than "flashy game."
In practice, embrace the utilitarian design but keep it clean. The zero radius and sharp contrasts work because they create clear hierarchy. Users know exactly where to look and what's actionable. Less distraction, more focus.
You might also like
Orange Theme
Bold orange theme with tactical precision
Red Theme
Intense red theme perfect for gaming
Cyberpunk Theme
Futuristic theme with competitive edge
Dark Matter Theme
Deep dark theme for focused gaming
Mono Theme
Clean monochrome theme for precision
Graphite Theme
Dark graphite theme with professional feel
FAQ
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.
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.