Bracket Pick'em

A bracket challenge on top of Tournament Bracket: tap a team to advance them round by round. Changing an early pick invalidates everything downstream.

Tap a team to pick: 0/7 games picked

Quarterfinals

1Backyard Bombers

8Caught Looking

4Plastic Fantastic

5Scuff City

3The Whiffleblowers

6Pitch Please

2Bat Attitudes

7Yellow Bat Society

Semifinals

TBD

Final

TBD

Quarterfinals

1Backyard Bombers

8Caught Looking

4Plastic Fantastic

5Scuff City

3The Whiffleblowers

6Pitch Please

2Bat Attitudes

7Yellow Bat Society

Semifinals

TBD

Final

TBD

Give it the opening round with no winners set and let people fill out the bracket. Picks are stored by team name, not by side - so when an early pick changes, downstream picks that named the now-eliminated team simply stop applying. No pruning bookkeeping, no stale champions.

Install#

npx shadcn@latest add https://benhof.ai/r/bracket-pickem.json

Depends on Tournament Bracket. The shadcn CLI installs it automatically from its registry URL.

Usage#

import { BracketPickem } from "@/components/bracket-pickem"

;<BracketPickem
  firstRound={[
    { id: "m1", home: { name: "A", seed: 1 }, away: { name: "D", seed: 4 } },
    { id: "m2", home: { name: "B", seed: 2 }, away: { name: "C", seed: 3 } },
  ]}
  onPicksChange={(picks) => save(picks)}
/>

Props#

Prop	Type	Default	Description
`firstRound`	`BracketMatch[]`	-	Opening-round matchups, no winners set - the player decides.
`titles`	`string[]`	auto	Round title overrides, champion slot last.
`onPicksChange`	`(picks: PickemPicks) => void`	-	Fires with the full pick map after every change. `PickemPicks` is `Record<matchId, teamName>`.
`schedulePlacement`	`"footer" \	"between"`	`"footer"`	Passed through to the underlying bracket.
`storageKey`	`string`	-	Persist picks to localStorage under this key - survives reloads, syncs across tabs. Omit for in-memory picks.

Notes#

resolvePickemRounds(firstRound, picks) is exported - the pure function that turns a pick map into renderable rounds. Use it to score submitted brackets on a server.
Tapping a picked team again un-picks it. A Reset button appears once any pick is made.
Because it renders TournamentBracket, the mobile list, schedules, and the run-trace all come along for free.