Batting Order

beta

A team's batting order from a baseball board: each player's shirt number and position, with the batter at the plate marked. One soft tint glides from player to player under the pointer.

Preview

Numbers and positions, with the batter at the plate marked, and a side in the field

Rivers batting order
No.	Pos.
17	Right field
15	Second base
14	Left field
28	Center field, at bat
24	Third base
19	Shortstop
11	First base
7	Catcher
35	Pitcher

Harbor batting order
No.	Pos.
47	Right field
45	Second base
44	Left field
58	Center field
54	Third base
49	Shortstop
41	First base
37	Catcher
65	Pitcher

A team sheet with names

Harbor batting order
No.	Pos.	Name
11	Shortstop	A. Lane
18	Second base, at bat	B. Cruz
26	Left field	C. Okafor
10	Designated hitter	D. Sato

On a dark green board, where the numbers are white plates

Rivers batting order
No.	Pos.
17	Right field
15	Second base
14	Left field
28	Center field
24	Third base, at bat
19	Shortstop
11	First base
7	Catcher
35	Pitcher

Install

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. Add the theme, once per app. It replaces your color tokens with ones checked for contrast.
```
npx shadcn@latest add @txbrendan/theme
```

3. Add the component.

npx shadcn@latest add @txbrendan/batting-order

Use it for

A team's lineup on a baseball scoreboard or a game page.
Pass the players in batting order, first to last, each with number and position, like "SS" or "2B".
Pass atBat with the shirt number at the plate while that team bats. Leave it out while they field.
Add name to each player for a team sheet. A board that shows numbers only leaves it out.

Avoid it for

A squad list with no order. Use a list with ShirtNumber beside each name.
A lineup that sorts or filters. Use DataTable.

Props

team
The team's name, which titles the table.
string
players
The players in batting order. Shirt numbers must be unique, since each one is a key.
{ number: number; position: string; name?: string }[]
atBat
The shirt number of the player at the plate.
number
className
Extra classes on the table. Later classes win. The table sits in a box that holds the hover tint, marked data-slot="batting-order-container". className and the other props still go to the table.
string

Prop	Type	Default	What it does
team	string	-	The team's name, which titles the table.
players	{ number: number; position: string; name?: string }[]	-	The players in batting order. Shirt numbers must be unique, since each one is a key.
atBat	number	-	The shirt number of the player at the plate.
className	string	-	Extra classes on the table. Later classes win. The table sits in a box that holds the hover tint, marked data-slot="batting-order-container". className and the other props still go to the table.

It is a table, captioned with the team's name and "batting order".
Screen readers hear standard positions in words, like "Shortstop" for SS. Other positions read as you pass them.
The batter at the plate has a brand plate, and screen readers hear "at bat" after their position. Forced colors paint fills away, so there the plate is outlined instead.

Examples

Numbers and positions, with the batter marked

<BattingOrder
  team="Rivers"
  atBat={28}
  players={[
    { number: 17, position: "RF" },
    { number: 15, position: "2B" },
    { number: 28, position: "CF" },
  ]}
/>

A team sheet with names

<BattingOrder team="Harbor" players={[{ number: 11, position: "SS", name: "A. Lane" }, { number: 18, position: "2B", name: "B. Cruz" }]} />

Preview

Install

Use it for

Avoid it for

Props

Accessibility

Examples

Numbers and positions, with the batter marked

A team sheet with names