# Line Score > A baseball line score: each team's runs by inning on number plates, then lit runs, hits, and errors, with the half-inning in play marked. - Name: `line-score` - Status: beta - Categories: sport, display - File: the install writes `line-score.tsx` to your `ui` alias, `@/components/ui` by default. - Other registry items: `@arbokui/rolling-number`. The install adds them. - Gallery: https://arbokui.com/components/line-score - Registry item: https://arbokui.com/r/line-score.json ## Install 1. Add the registry to `components.json`. Do this first, once: ```bash npx shadcn@latest registry add "@arbokui=https://arbokui.com/r/{name}.json" ``` The command writes this entry. You can also add it by hand: ```json { "registries": { "@arbokui": "https://arbokui.com/r/{name}.json" } } ``` Without this step, the shadcn CLI looks up `@arbokui` in a public list that Arbokui does not control. 2. Add the theme once per app. It replaces your color tokens with ones checked for contrast: ```bash npx shadcn@latest add @arbokui/theme ``` 3. Add the component: ```bash npx shadcn@latest add @arbokui/line-score ``` ## Use it for - The top of a baseball scoreboard, a game page, or a game card that needs every inning. - Pass each team's runs by inning. Leave an inning out until it starts, and its plate stays empty. - Pass "X" for a half that was never played, like the home side's last when it already leads. - Pass inning while the game is on, like { number: 5, half: "top" }. Its plate is outlined and the caption says "Top of the 5th". - Leave inning out once the game is over, and pass status, like "Final". - Runs total themselves. Hits and errors come from your data. - On a surface other than a card, set --line-score-surface to its color, so the team names cover the innings as they scroll. ## Avoid it for - A game with no innings, like football or rugby. Use MatchCard. - Only the final score. Print it, or use MatchCard. - More than two teams. A line score is one game. ## Props - `away`: `LineScoreTeam`. The visitors, who bat first: { name, short?, runs, hits?, errors? }. runs is (number | "X")\[\], by inning. - `home`: `LineScoreTeam`. The home side, who bat in the bottom of each inning. The same shape as away. - `innings`: `number`. Default `9`. How many innings the game is scheduled for. Extra innings add columns. - `inning`: `{ number: number; half: "top" | "bottom" }`. The half-inning being played now. Leave it out before the game and once it is over. - `status`: `string`. A word for the game's state when no inning is in play, like "Final" or "Rain delay". - `caption`: `string`. Default `"Line score"`. The table's name. - `className`: `string`. Extra classes on the outer div, which holds the container query. Later classes win. ## Accessibility - It is a table with a caption. Each team is a row header, and each inning, R, H, and E is a column header. - Screen readers hear "Inning 5", not just "5", and Runs, Hits, and Errors in full. - On a narrow board the short name shows, and screen readers still hear the full one. - The half in play is outlined, and the caption says it in words, like "Top of the 5th". The outline still shows in forced colors. - An inning that has not started reads "no score". - One polite line says each scoring change once, like "Rivers score 2 runs in the 4th. Harbor 1, Rivers 5." Never on load, and never for a pitch. - The innings take a Tab stop only when they scroll sideways, so a keyboard can scroll them too. Then they are a region named by the caption. - Runs, hits, and errors roll to each new value. Reduced motion and motion off jump straight there. ## Examples ### A game in the bottom of the 4th ```tsx ``` ### A finished game where the home side did not bat in the 9th ```tsx ``` ### On a dark board of your own ```tsx
```