Team Flag

beta

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

Preview

hoops

halves

thirds

split

no colors

beside names: a kit the color of the page keeps its edge

Rovers
Saints
Lions
Hawks
Wolves

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/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
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.
KitColors
pattern
How the two colors share the swatch.
"hoops" | "halves" | "thirds" | "split" · default "halves"
size
sm is 16×12px, md is 24×18px, lg is 32×24px.
"sm" | "md" | "lg" · default "md"
aria-label
Names it, like "Rovers colors", when no text beside it names the team.
string
className
Extra classes. Later classes win.
string

Prop	Type	Default	What it does
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"	"halves"	How the two colors share the swatch.
size	"sm" \| "md" \| "lg"	"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.

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

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

<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

<TeamFlag size="sm" />