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%

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.

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>

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

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

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;
}