Tournament Bracket
ProVisual bracket for knockout/elimination tournaments. Shows round progression from left to right with connecting lines between matches. Each node is a match result or upcoming fixture.
4 variants
Variants
| Variant | Description | When to use |
|---|---|---|
| Default | Standard bracket with connecting lines and round headers. | Use for single-elimination tournament views. |
| Compact | Condensed bracket for smaller viewports or sidebar display. | Use when horizontal space is limited. |
| With Seeds | Bracket showing seeding numbers alongside team names. | Use for seeded competitions where seed position is relevant. |
Usage Guidelines
Do
Provide a flat list alternative for screen readers.
Don't
Rely on the visual tree structure as the only way to understand progression.
Do
Label each round clearly (Quarter-finals, Semi-finals, Final).
Don't
Use connecting line colour to indicate winners — use text.
Do
Make each match node a link to the match detail.
Don't
Build brackets wider than 4 rounds without horizontal scrolling controls.
Code
Design Tokens
Accessibility
- Visual bracket uses role="img" with aria-label.
- Hidden flat list provides round-by-round results for screen readers.
- Each match is keyboard-navigable and links to detail.