A ballpark line score - innings across the top, away/home lines, R/H/E totals. Works for any period count.
| Team | 1 | 2 | 3 | 4 | 5 | R | H |
|---|---|---|---|---|---|---|---|
| Whiffleblowers | 0 | 2 | 0 | 1 | · | 3 | 6 |
| Bat Attitudes | 1 | 0 | 3 | 0 | · | 4 | 7 |
Monospace and hairline borders, at home on a dark panel or a light page. Unplayed innings render as a middle dot; the H and E columns only appear when you pass hits or errors - a wiffle ball line score is happily just runs.
Install#
npx shadcn@latest add https://benhof.ai/r/scoreboard.json
import { Scoreboard } from "@/components/scoreboard"
;<Scoreboard
innings={9}
away={{ name: "Away", innings: [0, 2, 0], runs: 2, hits: 5 }}
home={{ name: "Home", innings: [1, 0, 1], runs: 2, hits: 6 }}
/>
Props#
| Prop | Type | Default | Description |
|---|---|---|---|
away / home | ScoreboardLine | - | The two line scores. |
innings | number | longest line | Minimum inning columns to render (e.g. 9 before play starts). |
Line fields#
The ScoreboardLine type defines: name, innings (array of per-inning runs), runs, hits, and errors. The H and E columns render only when hits or errors are provided.