Scoreboard

scoreboard

CompetitiveBetacomponent

A match scoreboard with ranks, scores, assists, defeats, and movement states.

npx shadcn@latest add @gamecn/scoreboard

Live Preview

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

Frame

Scale100%

Ivara

12 defeats / 7 assists

1840

Tarin

9 defeats / 11 assists

1670

Moro

6 defeats / 16 assists

1515

Examples

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

Install Scoreboard and render it with the default GameCN treatment.

npx shadcn@latest add @gamecn/scoreboard

import { Scoreboard } from '@/components/ui/scoreboard'

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

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

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

<Scoreboard
  iconSrc="/game-assets/scoreboard.png"
/>