Skip to content
txbrendan/ui

Champion Card

beta

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.

Preview

live

Winner to be decided

states

Winner to be decided

Lions

Champion

Falcons City Athletic Club

League winners 2025

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

    Who won. null or left out until the winner is decided.

    { name: string } | null

  • subtitle

    The badge on the crowned card.

    string · default "Champion"

  • celebrate

    Throws confetti when crowned. false crowns it without.

    boolean · default true

  • className

    Extra classes on the root. Set the width here, like w-64. Later classes win.

    string

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

<ChampionCard />

Crowned

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

A past winner, with no confetti

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