Tournament Bracket
Animated knockout bracket with round navigation, live and finished matches, and elbow connectors.
17.8 KB
•Updated on September 3, 2026
Source: registry/components/spaceui/tournament-bracket/index.tsx. Round chevrons shift the visible window; match cards and connectors are motion layout.
Installation
Bash
pnpm dlx shadcn@latest add @spaceui/components-spaceui-tournament-bracketUsage
Code
import { TournamentBracket } from '@/components/spaceui/tournament-bracket'
export default function SpaceUI() {
return <TournamentBracket />
}Files
| File | Role |
|---|---|
tournament-bracket/index.tsx | TEAMS, rounds data, MatchBox, BracketContainer, TournamentBracket |
Default data is a World Cup–style knockout. Swap rounds in the file to feed your own matches (status: upcoming | live | finished, optional penalties).
Keep in mind
- MIT License: Free and open-source for personal and commercial use. Feel free to copy, tweak, and adapt the components to match your exact needs.
- Credits & Inspiration: Some components on this site are inspired by or recreated from great ideas across the web. I'm not here to take credit; just to learn, experiment, and push interface craft further.
- Reach out & Claims: If an attribution was missed, or if you have any inquiry or claim, feel free to reach out directly on X to @adrielzimbril. I'll be glad to update or resolve it right away.
On This Page
Powered by
