Runners on base at a glance - a basepath diamond with bases that fill when occupied.
1
3
Built for umpires tracking ghost runners on a phone between pitches at the Schott Classic. First, second, and third are rotated squares on a dashed basepath; occupied bases fill amber with the base number, and the whole diagram carries an aria-label ("Runners on first and third") so it reads as well as it looks.
Install#
npx shadcn@latest add https://benhof.ai/r/base-diamond.json
import { BaseDiamond } from "@/components/base-diamond"
;<BaseDiamond bases={{ first: true, third: true }} label="Ghost runners" />
Props#
| Prop | Type | Default | Description |
|---|---|---|---|
bases | BaseState | empty | { first?, second?, third? } booleans. |
compact | boolean | false | 20px footprint for score headers and list rows. |
label | string | - | Caption under the diamond. |