Brackets that keep up with the tournament.
Single and double elimination, round robin and Swiss for React. Seeded, live-updating, swipeable on a phone, and styled with whatever you already use.
The draw is set. First matches are under way.
Still a bracket on a phone.
Narrow screens get one round at a time, drawn as a bracket: the round you're on stacks neatly, the next one waits at the edge with its lines, and a swipe glides every match into place.
- Measured from its container, not the window, so it adapts inside a sidebar, a modal or a dashboard card.
- Prefer the whole tree? Let it scroll, scale it to fit, or let people pan and pinch to zoom.
- Built in, not bolted on. The swipe, zoom and animation are part of the library, with no gesture dependencies.
Spring Cup
Quarterfinals
- Falcons2Cobras3
- Lynx4Orcas3
- Wolves1Bison0
- Herons1Ravens0
Semifinals
- CobrasLynx
- WolvesHerons
Final
- TBDTBD
Every format, one component.
Build a stage with one function call, report results as they come in, and pass it to <Bracket>. Winners move on, byes resolve, and overturned results clear what came after them.
Seeded with automatic byes, and an optional third place match.
Quarterfinals
- Falcons2Cobras3
- Lynx4Orcas3
- Wolves1Bison0
- Herons1Ravens0
Semifinals
- CobrasLynx
- WolvesHerons
Final
- TBDTBD
Third place
- TBDTBD
Styled with what you already use.
Every element carries a data-part and its state, like data-winner or data-status="live". Use the optional theme, Tailwind classes, or your own match card. Connector lines follow whatever you draw.
import '@react-brackets/theme/theme.css';<Bracket stage={stage} className="spring-cup" />/* styles.css */.spring-cup { --rb-accent: #ea580c; --rb-radius: 16px; --rb-line-width: 2px;}Semifinals
- Falcons2Lynx3
- Wolves4Herons3
Final
- LynxWolves
Every prop, live.
Change the format, the number of teams and how much has been played. Switch to the phone preview to try the swipeable bracket. The code updates as you go.
Quarterfinals
- Falcons2Cobras3
- Lynx4Orcas3
- Wolves1Bison0
- HeronsRavens
Semifinals
- CobrasLynx
- WolvesTBD
Final
- TBDTBD
import { Bracket, singleElimination } from 'react-brackets';import '@react-brackets/theme/theme.css';const stage = singleElimination(teams);export function Tournament() { return ( <Bracket stage={stage} connectorRadius={8} /> );}Free and open source. React 18 and 19, no other dependencies, about 6 kB.