Setup Guide
One-time setup for using GAMING // NEXT components. Add these to your project, then copy any component from the theme.
The cn() utility combines clsx and tailwind-merge for conditional class names. Install both packages.
npm install clsx tailwind-mergeCreate lib/utils.ts with the cn() helper. Every component imports this for class name merging.
import { type ClassValue, clsx } from 'clsx'
import { twMerge } from 'tailwind-merge'
export function cn(...inputs: ClassValue[]): string {
return twMerge(clsx(inputs))
}Add the GAMING // NEXT design tokens to your globals.css. These define colors, fonts, and animation tokens used by every component in the theme.
@theme {
/* ── Color Tokens ─────────────────────────────────────────────────── */
--color-void: #0A0A0F;
--color-void-up: #0E0E16;
--color-void-surface: #12121C;
--color-neon-magenta: #FF2D78;
--color-neon-cyan: #00F0FF;
--color-neon-magenta-dim: rgba(255, 45, 120, 0.15);
--color-neon-cyan-dim: rgba(0, 240, 255, 0.1);
--color-neon-magenta-glow: rgba(255, 45, 120, 0.4);
--color-neon-cyan-glow: rgba(0, 240, 255, 0.3);
--color-text-primary: #E8E8F0;
--color-text-secondary: #7A7A8E;
--color-text-dim: #44445A;
--color-border: #1E1E2E;
--color-border-active: #2A2A3E;
--color-grid-line: rgba(30, 30, 46, 0.6);
/* ── Font Tokens ──────────────────────────────────────────────────── */
--font-display: var(--font-chakra-petch), 'Chakra Petch', sans-serif;
--font-body: var(--font-space-grotesk), 'Space Grotesk', sans-serif;
/* ── Animations ───────────────────────────────────────────────────── */
--animate-pulse-dot: pulse-dot 2s ease-in-out infinite;
--animate-ticker-scroll: ticker-scroll 40s linear infinite;
--animate-scanline: scanline 8s linear infinite;
}Each component may need its own CSS classes in your globals.css. Copy the styles for the components you use.
/* ── Reveal Animation ─────────────────────────────────────────────────── */
.btn-base {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
font-family: var(--font-display);
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
text-decoration: none;
border: none;
cursor: pointer;
transition: all 0.2s;
line-height: 1;
}
.btn-primary {
background: var(--color-neon-magenta);
color: white;
clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}
.btn-primary:hover {
background: #FF4D8E;
box-shadow: 0 0 20px var(--color-neon-magenta-glow);
}
.btn-secondary {
background: transparent;
color: var(--color-text-primary);
border: 1px solid var(--color-border);
}
.btn-secondary:hover {
border-color: var(--color-neon-cyan);
color: var(--color-neon-cyan);
}
.btn-ghost {
background: transparent;
color: var(--color-text-secondary);
border: none;
}
.btn-ghost:hover {
color: var(--color-neon-cyan);
}
.btn-sm {
padding: 8px 16px;
font-size: 0.65rem;
}
.btn-md {
padding: 12px 24px;
font-size: 0.72rem;
}
.btn-lg {
padding: 16px 32px;
font-size: 0.78rem;
}/* ── Reveal Animation ─────────────────────────────────────────────────── */
.badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
font-family: var(--font-display);
font-weight: 600;
font-size: 0.62rem;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.badge--magenta {
color: var(--color-neon-magenta);
background: var(--color-neon-magenta-dim);
border: 1px solid rgba(255, 45, 120, 0.25);
}
.badge--cyan {
color: var(--color-neon-cyan);
background: var(--color-neon-cyan-dim);
border: 1px solid rgba(0, 240, 255, 0.2);
}
.badge--dim {
color: var(--color-text-dim);
background: rgba(68, 68, 90, 0.15);
border: 1px solid var(--color-border);
}/* ── Reveal Animation ─────────────────────────────────────────────────── */
.text-body {
font-family: var(--font-body);
font-size: 0.95rem;
font-weight: 400;
line-height: 1.75;
color: var(--color-text-secondary);
}
.text-caption {
font-family: var(--font-body);
font-size: 0.8rem;
font-weight: 400;
color: var(--color-text-dim);
line-height: 1.5;
}
.text-label {
font-family: var(--font-display);
font-weight: 600;
font-size: 0.65rem;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--color-text-dim);
}
.text-code {
font-family: monospace;
font-size: 0.85rem;
color: var(--color-neon-cyan);
background: var(--color-neon-cyan-dim);
padding: 2px 8px;
border: 1px solid rgba(0, 240, 255, 0.12);
}/* ── Reveal Animation ─────────────────────────────────────────────────── */
.gaming-card {
padding: 28px 24px;
background: var(--color-void-up);
border: 1px solid var(--color-border);
transition: border-color 0.3s;
}
.gaming-card:hover {
border-color: var(--color-border-active);
}
.card-title {
font-family: var(--font-display);
font-weight: 700;
font-size: 1rem;
letter-spacing: 0.02em;
color: var(--color-text-primary);
margin-bottom: 8px;
}
.card-description {
font-size: 0.85rem;
line-height: 1.65;
color: var(--color-text-secondary);
}Button
Competitive gaming button with primary, secondary, and ghost variants in three sizes. Neon magenta accent, Chakra Petch labels, uppercase tracking. Renders as a Next.js Link when an href is provided.
Badge
Esports badge with magenta, cyan, and dim variants. Bold uppercase labels for status indicators and system tags.
Text
Polymorphic text component with body, caption, label, and code variants. Chakra Petch for display, Space Grotesk for body.
Card
System card with title, description, and optional children slot. Dark surface with neon border accents for feature and data panels.