Balls, strikes, and outs as broadcast-style dot rows - green, yellow, red - with configurable max counts.
The at-bat count the way a park scoreboard shows it. Each row renders one dot fewer than its max: a full row means the next one walks the batter, rings them up, or retires the side. Rewritten from the Schott Classic scorekeeping app.
Install#
npx shadcn@latest add https://benhof.ai/r/count-display.json
import { CountDisplay } from "@/components/count-display"
;<CountDisplay balls={2} strikes={1} outs={1} />
Props#
| Prop | Type | Default | Description |
|---|---|---|---|
balls / strikes / outs | number | 0 | Current counts. |
maxBalls / maxStrikes / maxOuts | number | 4 / 3 / 3 | The terminal counts for your format - wiffle rules disagree about everything. |
compact | boolean | false | Smaller dots and labels for tight layouts. |
showValues | boolean | false | Shows the numeric count above each dot row. |