Overview

Everything the bracket draws can be restyled or replaced, one piece at a time. Start with the lightest tool that does the job; each step down the list gives you more control and asks for a little more code.

How customising worksCopy Anchor Link

<Bracket> is a shortcut that renders a set of parts for you: a root, a viewport, the rounds, their matches, the lines and the round navigation. Every part:

• renders a real element with data-scope="bracket" and a data-part, so any CSS can find it,
• carries its state as attributes, like data-winner, data-status="live" or data-highlighted,
• passes any other prop through to its element, like style, onClick or aria-*,
• takes className as a string, or as a function of its state.

When a shortcut prop isn't enough, swap the one part you need and keep the rest. renderMatch replaces the card but keeps the lines, paging, highlighting and clicks. renderConnector replaces the lines but keeps their measuring. Compose the parts yourself only when you need to change the structure, like adding a header between the round title and its matches.

A className for every stateCopy Anchor Link

Each part's className can be a function. It receives the part's state, so you can style from data without writing selectors:

<Bracket.Match
  className={({ match, highlighted }) =>
    cn('rounded-lg border', match.status === 'live' && 'border-red-500', highlighted && 'ring-2')
  }
/>

Your own dataCopy Anchor Link

Anything you put in meta on a participant, a match or a group comes back to you wherever you render it: a logo URL, a country, a seed, a venue or a stream link. See your own data.