Skip to content
txbrendan/ui

Shirt Number

beta

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

Preview

size

999232323

list

  • 9Sam Carter
  • 10Noah Kerr
  • 15Finn Doyle

kit colors: only where the number says which team

  • 12'10Try, Noah KerrRovers
  • 14'10Conversion, Noah KerrRovers
  • 31'14Penalty, Jake MossSaints
  • 58'7Yellow card, Leo GrantSaints

Install

  1. 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. 2. Add the theme, once per app. It replaces your color tokens with ones checked for contrast.

    npx shadcn@latest add @txbrendan/theme

  3. 3. Add the component.

    npx shadcn@latest add @txbrendan/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

    The number on the shirt.

    number

  • colors

    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.

    [shirt: string, number: string]

  • size

    sm is 20px, md is 26px, lg is 32px.

    "sm" | "md" | "lg" · default "md"

  • className

    Extra classes. Later classes win.

    string

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

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

Sizes

<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

// 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>