Round of 32
Round of 16
Quarter-finals
Semi-finals
Final
Mon, 29 JunFT
South Africa0
Canada1Tue, 30 JunFT (P)
Netherlands1 (2)
Morocco1 (3)Tue, 30 JunFT (P)
Germany1 (3)
Paraguay1 (4)Wed, 1 JulFT
France3
Sweden0Thu, 2 JulFT
Belgium3
Senegal2Thu, 2 JulFT
USA2
Bosnia and Herzegovina0Fri, 3 JulFT
Spain3
Austria0Fri, 3 JulFT
Portugal2
Croatia1Mon, 29 JunFT
Brazil2
Japan1Tue, 30 JunFT
Côte d'Ivoire1
Norway2Wed, 1 JulFT
Mexico2
Ecuador0Wed, 1 JulFT
England2
DR Congo1Fri, 3 JulFT
Switzerland2
Algeria0Sat, 4 JulFT
Colombia1
Ghana0Fri, 3 JulFT (P)
Australia1 (2)
Egypt1 (4)Sat, 4 JulFT
Argentina3
Cabo Verde2Sat, 4 JulFT
Canada0Morocco3Sun, 5 JulFT
Paraguay0France1Mon, 6 JulFT
USA1Belgium4Mon, 6 JulFT
Portugal0Spain1Mon, 6 JulFT
Brazil1Norway2Mon, 6 JulFT
Mexico2England3Tue, 7 JulFT (P)
Switzerland0 (4)Colombia0 (3)Tue, 7 JulFT
Argentina3Egypt2Fri, 10 Jul, 4:00 amFT
France2Morocco0Sat, 11 Jul, 3:00 amFT
Spain2Belgium1Sun, 12 Jul, 5:00 amFT
Norway1England2Sun, 12 Jul, 10:00 amFT
Argentina2Switzerland0Wed, 15 Jul, 4:00 amFT
France1Spain0Thu, 16 Jul, 3:00 amFT
England1Argentina3Mon, 20 Jul, 3:00 amFT
France2Argentina3All times are in India Standard Time
Mugen Tournament Bracket
A Google-style knockout bracket that pages one round at a time, with flag cards, elbow connectors, and a World Cup-shaped tree.
Dependencies
Interaction Types
Click the right chevron to page forward a round
Watch the bracket re-flow and collapse its height
Click the left chevron to reveal earlier rounds
How to use
import { MugenTournamentBracket, ROUNDS } from "@/components/mugen-tournament-bracket";
export default function Demo() {
return <MugenTournamentBracket rounds={ROUNDS} />;
}Component Props
| Prop | Type | Default | Description |
|---|---|---|---|
| rounds | KnockoutRound[] | — | Ordered rounds. Each round has half as many matches as the one before it |
| initialRound | number | 1 | Leftmost round on mount. Defaults to 1 so Round of 32 sits behind the chevron |