Skip to Content
react-brackets

Introduction

Headless, responsive tournament brackets for React.

react-brackets draws tournament brackets from plain data. It handles the hard parts, like seeding, byes, results, layout, connector lines and small screens, and leaves the look to you.

Quarterfinals

  1. Falcons
    Cobras
  2. Lynx
    Orcas
  3. Wolves
    Bison
  4. Herons
    Ravens

Semifinals

  1. TBD
    TBD
  2. TBD
    TBD

Final

  1. TBD
    TBD
app.tsx
import { Bracket, singleElimination } from 'react-brackets';
import '@react-brackets/theme/theme.css';

const stage = singleElimination([
  { id: 'falcons', name: 'Falcons' },
  { id: 'wolves', name: 'Wolves' },
  // …
]);

export function App() {
  return <Bracket stage={stage} />;
}

How it fits together

Stages are data

A stage is a serialisable object. Format functions build one, reportResult returns the next one.

Components are headless

Every element has a data-part and state attributes. The theme is optional.

Every screen size

A swipeable bracket on phones, or the full tree with scroll, fit, or pan and zoom.

Every format

Single and double elimination, round robin, Swiss and groups into playoffs.

Packages

PackageWhat it is
react-bracketsThe React components. Re-exports everything from the core.
@react-brackets/coreFormats, results, standings and layout. No framework, no dependencies.
@react-brackets/themeAn optional stylesheet driven by CSS variables.

Installation

Add react-brackets to a React 18 or 19 project.

On this page

How it fits togetherPackages