Scoreboard

Preview

Install

1. 1. Add the registry to components.json, once per app. Without it, the shadcn CLI looks up @txbrendan in a public list that txbrendan/ui does not control.

   npx shadcn@latest registry add "@txbrendan=https://txbrendan.dev/r/{name}.json"

2. 2. Add the theme, once per app. It replaces your color tokens with ones checked for contrast.

   npx shadcn@latest add @txbrendan/theme

3. 3. Add the block. It also adds every component it uses. Its own files go in your components folder, and they are yours to edit.

   npx shadcn@latest add @txbrendan/scoreboard

Props

• away

  The visitors: a LineScoreTeam plus lineup?, their batting order. With home, the game on the board.

  ScoreboardTeam

• home

  The home side, the same shape.

  ScoreboardTeam

• innings

  How many innings the game is scheduled for.

  number · default 9

• inning

  The half-inning being played now.

  { number: number; half: "top" | "bottom" }

• status

  A word for the game's state when no inning is in play, like "Final".

  string

• count

  The count now. Leave it out to hide the count.

  { balls: number; strikes: number; outs: number }

• batter

  Who is at the plate.

  { number: number; average?: string }

• leagues

  Other games, one table per group.

  { title: string; games: LeagueScoresGame[]; note?: ReactNode }[] · default []

• umpires

  The umpires by base, like { label: "Plate", number: 17 }.

  { label: string; number: number }[] · default []

• loading

  Shows placeholder tiles while the game loads.

  boolean · default false

• loadingText

  What the status line tells screen readers while loading.

  string · default "Loading the scoreboard"

• emptyText

  Shown when there is no game and nothing is loading.

  string · default "No game on the board."

• className

  Extra classes on the board, which holds the container query.

  string

Accessibility

• The board is a section named "Scoreboard". Pass aria-label to name it after the game.
• Each part keeps its own table or list, so screen readers can move by table and by row.
• The line score says each scoring change once in a polite line. The count does not, since it changes every pitch.
• On the dark green board, white text is 12.6:1, the lit amber is 9.6:1, and the muted labels are 5.5:1.
• While loading, the board has aria-busy="true" and a status line says loadingText.

Examples

<Scoreboard
  away={{ name: "Harbor", short: "HAR", runs: [0, 1, 0, 0], hits: 4, errors: 1, lineup: harborLineup }}
  home={{ name: "Rivers", short: "RIV", runs: [1, 0, 2], hits: 3, lineup: riversLineup }}
  inning={{ number: 4, half: "bottom" }}
  count={{ balls: 1, strikes: 2, outs: 1 }}
  batter={{ number: 24, average: ".267" }}
/>

<Scoreboard away={{ name: "Harbor", runs: [0, 1, 0, 0, 2, 0, 0, 1, 0], hits: 9 }} home={{ name: "Rivers", runs: [1, 0, 2, 1, 0, 0, 1, 0, "X"], hits: 8 }} status="Final" />

<Scoreboard loading />