The GameCN theme is a runtime component-style system, not a site skin or a color palette. Set data-gamecn-theme on html, a route, or a component subtree to switch component anatomy: control shapes, bevels, borders, menu focus states, meter tracks, pips, card slots, paper surfaces, HUD rails, and overlay frames. Your app background and shadcn light/dark tokens remain yours.

npx shadcn@latest add @gamecn/gamecn-theme

export function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" data-gamecn-theme="rpg">
      <body>{children}</body>
    </html>
  )
}

The built-in theme ids stay stable: rpg is ornate high-fantasy, fantasy-parchment is medieval adventure, sci-fi is clean command UI, cyberpunk is neon glitch HUD, and horror maps to post-apocalyptic survival UI.

GameCN Theme

gamecn-theme

FoundationReadytheme

Installable runtime style bundle for fantasy, medieval, sci-fi, cyberpunk, and post-apocalyptic game UI.

npx shadcn@latest add @gamecn/gamecn-theme

Live Preview

Rendered with the component style selected in the top-right selector.

Frame

Scale100%

Theme Tokens

Runtime CSS variables with copyable color code.

Background

bg-background

--background: var pending;

Foreground

text-foreground

--foreground: var pending;

Card

bg-card

--card: var pending;

Primary

bg-primary

--primary: var pending;

Secondary

bg-secondary

--secondary: var pending;

Accent

bg-accent

--accent: var pending;

Destructive

bg-destructive

--destructive: var pending;

Border

border-border

--border: var pending;

Frame Border

gamecn-frame

--gamecn-border: var pending;

Legendary

rarity=legendary

--gamecn-rarity-legendary: var pending;

Danger Tone

critical states

--gamecn-tone-danger: var pending;

Examples

Basic setup, game-state usage, and customization paths.

Basic

Install GameCN Theme and render it with the default GameCN treatment.

npx shadcn@latest add @gamecn/gamecn-theme

<html data-gamecn-theme="rpg">
  <body>{children}</body>
</html>

Advanced

Use GameCN Theme with richer game-state data such as variants, empty states, compact density, or critical states.

<GameCNTheme
  className="max-w-md"
/>

Customization

Swap artwork, tune tokens, and wire the installed copy to your live game state.

@theme inline {
  --font-display: "Saira", ui-sans-serif, system-ui, sans-serif;
}

Theming

Theme Tokens

Basic

Advanced

Customization