Parts

Compose the parts yourself when <Bracket> isn't enough. Every part:

• renders a real element with data-scope="bracket" and its data-part,
• passes any other prop through to that element, like onClick, style or aria-*,
• takes className as a string, or as a function of its state.

<Bracket.Root stage={stage}>
  <Bracket.GroupTitle />
  <Bracket.Viewport>
    <Bracket.Rounds>
      {() => (
        <Bracket.Round>
          <Bracket.RoundTitle />
          <Bracket.Matches>
            {() => (
              <Bracket.Match>
                <Bracket.Participant slot={0} />
                <Bracket.Participant slot={1} />
              </Bracket.Match>
            )}
          </Bracket.Matches>
        </Bracket.Round>
      )}
    </Bracket.Rounds>
    <Bracket.Connectors />
  </Bracket.Viewport>
  <Bracket.Pagination />
</Bracket.Root>

Bracket.RootCopy Anchor Link

Draws one group, or several on one grid. Everything inside reads from it.

className receives RootState.

Bracket.ViewportCopy Anchor Link

The window the rounds are drawn in: scrolling, scaled, zoomable, or paged on narrow containers.

Bracket.RoundsCopy Anchor Link

Calls its children once per column, left to right.

Bracket.RoundCopy Anchor Link

One column. Takes any prop of a section. className receives RoundState.

Bracket.GroupTitle and Bracket.RoundTitleCopy Anchor Link

An h2 with the group's name and an h3 with the round's name. Children replace the name.

Bracket.MatchesCopy Anchor Link

The list of matches in a column. Its children renders one match:

<Bracket.Matches>{(match) => <MyCard match={match} />}</Bracket.Matches>

Bracket.MatchCopy Anchor Link

A match card. Connector lines attach to it, and it becomes a button when the root has onMatchClick.

Bracket.ParticipantCopy Anchor Link

One side of a match. By default it shows the name and score.

<Bracket.Participant slot={0}>
  {({ participant, winner, slot }) => (
    <>
      <Flag code={participant?.meta?.country} />
      <span className={winner ? 'font-bold' : ''}>{participant?.name ?? 'TBD'}</span>
      <span>{slot.score}</span>
    </>
  )}
</Bracket.Participant>

Bracket.ConnectorsCopy Anchor Link

The lines between matches, as one SVG. Place it inside Bracket.Viewport. Its children renders one line:

<Bracket.Connectors radius={8}>{() => <Bracket.Connector strokeDasharray="4 4" />}</Bracket.Connectors>

Bracket.ConnectorCopy Anchor Link

One line, with its data-* attributes and theme styling. Takes any prop of an SVG path, including your own d. className receives ConnectorState. See connector lines for recipes.

Bracket.PaginationCopy Anchor Link

Round navigation for the paged view: previous, a button per round, next. It renders nothing while the whole tree is shown. Takes any prop of a nav.