# Shirt Number

> A shirt number on a rounded square, never a circle, in ink by default or in a team's kit colors.

- Name: `shirt-number`
- Status: beta
- Categories: sport, display
- File: the install writes `shirt-number.tsx` to your `ui` alias, `@/components/ui` by default.
- Gallery: https://arbokui.com/components/shirt-number
- Registry item: https://arbokui.com/r/shirt-number.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/shirt-number
   ```

## Use it for

- Beside a player's name in a squad list, a team sheet, or a match log.
- Leave colors off. The number is ink, the page's own text color.
- Pass colors, \[shirt, number\], only where the number says which team, as in a match log with both sides.

## Avoid it for

- Kit colors to decorate. They are for telling two teams apart.
- A circle, or a photo's place. A shirt number is square, so nobody mistakes it for an avatar.
- Counts or scores. Use plain text or a badge.

## Props

- `number`: `number`. The number on the shirt.
- `colors`: `[shirt: string, number: string]`. The kit's colors from your data, \[shirt, number\], as any CSS colors. A club's KitColors from team-flag pass as they are. Pick a pair that reads. Without them, the number is ink.
- `size`: `"sm" | "md" | "lg"`. Default `"md"`. sm is 20px, md is 26px, lg is 32px.
- `className`: `string`. Extra classes. Later classes win.

## Accessibility

- The number is plain text, so screen readers read it with the name beside it.
- Ink is the page's text on its background, which the theme holds to 4.5:1 in light and dark.
- Kit colors come from your data, so the theme cannot check them. You pick a background and number that reach 4.5:1.
- Never let a kit color carry meaning alone. Name the team in text nearby.

## Examples

### Beside a name

```tsx
<p className="flex items-center gap-2">
  <ShirtNumber number={10} />
  Noah Kerr
</p>
```

### Sizes

```tsx
<div className="flex items-center gap-2">
  <ShirtNumber number={9} size="sm" />
  <ShirtNumber number={9} />
  <ShirtNumber number={9} size="lg" />
</div>
```

### Kit colors telling two teams apart

```tsx
// home and away come from your data. Each kit is a [shirt, number] pair that reaches 4.5:1.
<ul className="flex flex-col gap-2">
  <li className="flex items-center gap-2">
    <ShirtNumber number={10} colors={home.kit} size="sm" />
    Try, {home.name}
  </li>
  <li className="flex items-center gap-2">
    <ShirtNumber number={14} colors={away.kit} size="sm" />
    Penalty, {away.name}
  </li>
</ul>
```