# Champion Card

> The champion's slot: a dashed "Winner to be decided" until crowned, then a warm card that springs in with sparkles and 3 seconds of confetti.

- Name: `champion-card`
- Status: beta
- Categories: sport, display
- File: the install writes `champion-card.tsx` to your `ui` alias, `@/components/ui` by default.
- npm packages: `lucide-react`. The install adds them.
- Other registry items: `@arbokui/motion-timing`. The install adds them.
- Gallery: https://arbokui.com/components/champion-card
- Registry item: https://arbokui.com/r/champion-card.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/champion-card
   ```

## Use it for

- The end of a bracket or a finals board, where the winner goes.
- Leave champion out until the final is decided. Then pass { name }, and the card springs in.
- Pass celebrate={false} for a past winner, so a page that loads already crowned throws no confetti.
- Use subtitle to say what they won, like "Cup winners 2026". It replaces the Champion badge.
- Set the width with className. It is 200px by default.

## Avoid it for

- Ordinary results, like a match winner. Keep the confetti for the one champion.
- More than one on a page, since each throws its own confetti.

## Props

- `champion`: `{ name: string } | null`. Who won. null or left out until the winner is decided.
- `subtitle`: `string`. Default `"Champion"`. The badge on the crowned card.
- `celebrate`: `boolean`. Default `true`. Throws confetti when crowned. false crowns it without.
- `className`: `string`. Extra classes on the root. Set the width here, like w-64. Later classes win.

## Accessibility

- The root is a polite live region, so crowning it while someone is on the page says the winner's name and badge.
- The trophy, sparkles, and confetti are hidden from screen readers.
- Under reduced motion the card and its sparkles only fade in, and it throws no confetti. With motion off, it crowns in place.
- The crowned card's text is the warning tone's soft text on its soft fill, and the badge is its solid pair. The theme holds both to 4.5:1.
- The confetti never takes a press.

## Examples

### Before the final

```tsx
<ChampionCard />
```

### Crowned

```tsx
<ChampionCard champion={{ name: "Rovers" }} subtitle="Cup winners 2026" />
```

### A past winner, with no confetti

```tsx
<ChampionCard champion={{ name: "Lions" }} subtitle="Cup winners 2025" celebrate={false} />
```