About
A head-to-head tournament bracket that renders rounds of matchups as cards and highlights the winner of each matchup.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Tournament Bracket to your project and fits it to your theme.
Code
How Tournament Bracket is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
import {
TournamentBracket,
type BracketMatch,
} from "@/components/ui/tournament-bracket";
export default function TournamentBracketDemo() {
const rounds: BracketMatch[][] = [
[
{ id: "q1", a: "ADA", b: "REX", winner: "a" },
{ id: "q2", a: "ROW C", b: "MAX", winner: "b" },
],
[{ id: "f1", a: "ADA", b: "MAX" }],
];
return (
<div className="flex w-full items-center justify-center bg-background p-8">
<TournamentBracket rounds={rounds} className="w-full max-w-xl" />
</div>
);
}
More by f0rextasy
View all
Newsletter Signup Card
9
Stamp Seal
7
Network Graph
7
Board Checklist
5
Empty State Card
3
Running Order Timeline
3
Invite Modal
3
Time Input
3