# Team Flag

> A small swatch of a team's two kit colors, in hoops, halves, thirds, or split, standing in for a club crest.

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

## Use it for

- Beside a team's name in a fixture, a bracket, a standings table, or a club switcher.
- Pass the kit's two colors from your data, and the pattern the kit uses.
- Leave colors off when you do not know them. It shows a plain neutral swatch.
- Use sm in dense rows, md beside body text, and lg in a header.

## Avoid it for

- Drawing a club's crest or logo. A flag stands in for it, so no brand art is ever drawn.
- Telling teams apart by color alone. Always show the team's name in text beside it.
- A default club color. Without colors, the swatch is neutral, since no club's colors are anyone's default.

## Props

- `colors`: `KitColors`. The kit's two colors from your data, \[main, second\], as any CSS colors. The KitColors type is exported for other parts that take a kit.
- `pattern`: `"hoops" | "halves" | "thirds" | "split"`. Default `"halves"`. How the two colors share the swatch.
- `size`: `"sm" | "md" | "lg"`. Default `"md"`. sm is 16×12px, md is 24×18px, lg is 32×24px.
- `aria-label`: `string`. Names it, like "Rovers colors", when no text beside it names the team.
- `className`: `string`. Extra classes. Later classes win.

## Accessibility

- Hidden from screen readers by default, since the team's name sits beside it.
- With aria-label it is role="img" with that name.
- A hairline in the border color keeps its edge when a kit color matches the page.
- Kit colors come from your data, so the theme cannot check them, and picking colors that read is your job. The name in text carries the meaning.

## Examples

### Beside a team's name

```tsx
// club comes from your data: { name, kit: KitColors, pattern }.
<p className="flex items-center gap-2">
  <TeamFlag colors={club.kit} pattern={club.pattern} />
  {club.name}
</p>
```

### Patterns

```tsx
<div className="flex items-center gap-2">
  <TeamFlag colors={["var(--chart-1)", "var(--background)"]} pattern="hoops" />
  <TeamFlag colors={["var(--chart-1)", "var(--background)"]} pattern="halves" />
  <TeamFlag colors={["var(--chart-1)", "var(--background)"]} pattern="thirds" />
  <TeamFlag colors={["var(--chart-1)", "var(--background)"]} pattern="split" />
</div>
```

### Colors not known yet

```tsx
<TeamFlag size="sm" />
```