Tournament Bracket
Tournament bracket: single and double elimination, series scores, winner, team path, monograms. Pro · Games › Tournaments and patches
A playoff bracket, single or double elimination: rounds side by side with connectors from each match to the one it feeds, the upper and lower brackets and the grand final, series scores and winners, live and upcoming matches with their start time, and a team's whole path lit up on hover. Teams without a logo get a monogram. The layout is computed, not measured, so it renders on the server; narrow screens scroll it sideways inside the panel.
Installation
npx valyro-cli@latest login
npx valyro-cli@latest add tournament-bracketnpm install valyro-ui-pro
import 'valyro-ui-pro/styles.css';
import { TournamentBracket } from 'valyro-ui-pro';Props
| Prop | Type | Default | |
|---|---|---|---|
teams * | EsportsTeam[] | Teams or players. | |
matches * | EsportsMatch[] | Matches with their round (0 = first) and index inside it. Lower-bracket and grand-final matches (bracket: 'lower' | 'grand') make it a double-elimination bracket; a thirdPlace match goes under the final. | |
roundNames | string[] | Round names of the upper (or only) bracket instead of Final, Semifinals, Round N (index 0 = first round). | |
lowerRoundNames | string[] | Round names of the lower bracket. | |
onMatchClick | (match: EsportsMatch) => void | Makes matches buttons, e.g. to open the match page. | |
highlightTeam | string | Team whose path is highlighted (the pointer highlights the team under it). | |
title | ReactNode | Heading. Default: labels.title. | |
subtitle | ReactNode | Line under the heading: dates, format, prize pool. | |
headingLevel | 2 | 3 | 4 | 5 | 3 | Level of the heading; rounds go one level below (default 3). |
timeZone | string | IANA time zone of match times (default: the ThemeProvider's, then the reader's). | |
locale | string | BCP 47 locale for numbers and dates; defaults to the ThemeProvider's. | |
labels | Partial<TournamentBracketLabels> | Overrides for the built-in English text; keys left out keep their defaults. |
Related components
- Patch Notes — Patch notes: champions and items with ability icons, before → after, buffs, nerfs and changes, filters
- Tier List — S+…D tier list: portraits with role badges, role filter, drag with mouse, touch or keyboard, export
- Meta Table — Meta table: tier, win, pick and ban rates with patch-over-patch change, role and rank filters, virtualized
- Matchup Matrix — Counterpicks: champion-vs-champion heat matrix with tooltips, pick your champion, a list on phones
Previous: Matchup Matrix · Next: Patch Notes · All Games