Layouts

Two-sidedCopy Anchor Link

layout="mirrored" splits the bracket into halves that meet at the final, like the ones on TV.

<Bracket stage={stage} layout="mirrored" />

Hiding byesCopy Anchor Link

With a field that isn't a power of two, the top seeds play a "Bye" in round one. hideByes hides those matches and their lines, and leaves everything else in place:

<Bracket stage={singleElimination(sixTeams)} hideByes />

How placement worksCopy Anchor Link

The core places every match on a grid, centred between the matches that feed it. Matches with no feeder stack from the top of their column, which is how round robin and Swiss rounds become tidy columns. The React layer uses CSS grid with subgrid, so placement never needs measuring and any card height works. Only the connector lines are measured.