COMPONENT LIBRARY

UI Primitives

Every component ships fully typed and prop-driven. Customize colors via @theme tokens in globals.css. No component edits needed.

4Primitives

7Sections

5Hooks

30+Total

Explore components Back to home

01Button 02Badge 03Text 04Card 05Stats 06Color Tokens 07System Pages

01: PRIMITIVES

Button

VARIANTS

SIZES

GAMING COMBOS

AS LINKS

View all components Back to home

Pass an href prop and Button renders as next/link automatically.

02: PRIMITIVES

Badge

COLOR VARIANTS

MagentaCyanDim

GAMING CONTEXT

LIVERANKEDOFFLINETOURNAMENTSEASON 14MAINTENANCEPRO LEAGUEACTIVE

03: PRIMITIVES

Text

BODY

Space Grotesk0.95remline-height 1.75

Precision-engineered component copy. Use this for descriptions, feature explanations, and any block of readable text. Pairs with Chakra Petch display headings.

<Text variant="body">Your content here.</Text>

CAPTION

Space Grotesk0.8remdim color

Updated March 27, 2026 . Season 14 . Patch 4.2.1

<Text variant="caption">Updated March 27, 2026</Text>

LABEL

Chakra Petch0.65remuppercaseletter-spacing

default

SYSTEMS

magenta

LIVE STATUS

<Text variant="label">SYSTEMS</Text>

CODE

monospace0.85remcyaninline

src/app/globals.css

@/components/ui/Button

variant="primary"

<Text variant="code">src/app/globals.css</Text>

04: PRIMITIVES

Card

Rating Engine

Glicko-2 derived skill rating with confidence intervals. Converges in under 20 matches.

Server Mesh

Distributed relay network across 42 regions. Sub-50ms automatic failover.

Smart Queue

Priority-weighted matching with role preferences and ping limits.

USAGE

<Card
  title="Rating Engine"
  description="Glicko-2 derived skill rating..."
/>

05: SECTIONS

Stats Bar

14ms

Median API Latency

99.97%

Platform Uptime

340M

Matches Played

1.2B

Rating Calculations

06: THEME SYSTEM

Color Tokens

void

#0A0A0F

void-up

#0E0E16

void-surface

#12121C

neon-magenta

#FF2D78

neon-cyan

#00F0FF

text-primary

#E8E8F0

text-secondary

#7A7A8E

text-dim

#44445A

border

#1E1E2E

HOW TO SWAP TOKENS

All tokens live in src/app/globals.css under @theme. Change any value and every component updates automatically.

See it live on home

07: SYSTEM

System Pages

404 PAGE

404

Route not found. Shown when a path does not exist.

PREVIEW

ERROR PAGE

ERR

System fault. Shown on runtime exceptions.

PREVIEW

The 404 page is live at any unknown route. Try /this-does-not-exist. The error page triggers on runtime exceptions.