Installation

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

npm install react-brackets @react-brackets/theme

The theme is optional. Skip it if you style everything yourself, for example with Tailwind.

Import the theme once

main.tsx

import '@react-brackets/theme/theme.css';

It follows the page's color-scheme, so light and dark mode work without extra setup.

Requirements

React 18.2 or 19
Any modern browser. The layout uses CSS grid with subgrid, which every evergreen browser supports.
Works with Vite, Next.js (App and Pages Router), Remix and any other React setup. See server components for Next.js specifics.

Introduction

Headless, responsive tournament brackets for React.

Single elimination

A knockout bracket with seeding, byes and an optional third place match.

On this page

Import the theme once Requirements