Knockout Bracket

Component

About

An animated single-elimination tournament bracket that pages one round at a time, centering each match between its two feeder matches with animated connectors, cards and an optional third-place play-off.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Knockout Bracket to your project and fits it to your theme.

Code

How Knockout Bracket is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import {
  KnockoutBracket,
  ROUNDS,
  THIRD_PLACE,
} from "@/components/ui/knockout-bracket";

// `ROUNDS` is the sample World Cup draw that ships with the component. Any other
// single-elimination tournament renders the same way. Build your own `Round[]`,
// widest round first, each round holding half the matches of the one before it,
// and pass it in.
export default function KnockoutBracketPreview() {
  return (
    <div className="w-full py-8">
      <KnockoutBracket rounds={ROUNDS} thirdPlace={THIRD_PLACE} />
    </div>
  );
}