Package Exports

bracket-pro-react
bracket-pro-react/dist/index.js
bracket-pro-react/dist/index.mjs

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (bracket-pro-react) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Bracket Pro React v2.5

A sophisticated, highly customizable tournament bracket engine for React and Next.js. Designed for high-performance e-sports platforms, sports management, and gaming communities.

🚀 Features

Double & Single Elimination: Full support for standard formats and variations (No Comeback, No Secondary Final).
Deep Design Authority: Customize every dimension—card width, gaps, border-radius, and colors—via the theme prop.
Framework Independent: Works perfectly with Tailwind, Bootstrap, or pure CSS. No utility class collisions.
Match Reporting: Built-in interactive reporting modal supporting Best of 1, 3, or 5 matches.
Compressed Mode: High-density view for large brackets, optimized for mobile responsiveness.
TypeScript First: Full type safety for tournament data and theme configurations.

📦 Installation

npm install bracket-pro-react

🛠️ Quick Start

1. Import Styles (Crucial Step)

Unlike plain HTML where you use <link>, in React you must import the CSS file directly into your JavaScript/TypeScript entry point (usually App.tsx or main.tsx). This allows your build tool to bundle the styles correctly.

// At the very top of your App.tsx
import 'bracket-pro-react/bracket-styles.css';

2. Basic Usage

import { TournamentBracket, BracketData } from 'bracket-pro-react';

const myData: BracketData = {
  type: 'single',
  rounds: [
    {
      id: 'r1',
      title: 'Quarter Finals',
      matches: [
        {
          id: 'm1',
          participants: [
            { id: '1', name: 'Alpha Team', score: 2, status: 'winner' },
            { id: '2', name: 'Beta Squad', score: 0 }
          ],
          bestOf: 3
        }
      ]
    }
  ]
};

export default function MyBracket() {
  return (
    <TournamentBracket 
      data={myData} 
      theme={{
        accentColor: '#6366f1',
        cardWidth: 240,
        borderRadius: 12
      }}
    />
  );
}

🎨 Customization (Theming)

The theme prop gives you full control over the bracket's aesthetics. It uses CSS variables internally to ensure zero performance overhead.

Property	Type	Default	Description
`cardWidth`	`number \| string`	`210px`	The width of individual match cards.
`roundGap`	`number \| string`	`60px`	Horizontal spacing between tournament rounds.
`matchGap`	`number \| string`	`32px`	Vertical spacing between matches in a round.
`accentColor`	`string`	`#6366f1`	Primary theme color (lines, active states).
`cardBackground`	`string`	`#0f172a`	Background color of the match card.
`borderRadius`	`number`	`12`	Corner radius for cards and UI elements.
`fontSize`	`number`	`12`	Base font size for team names and scores.

⚙️ Advanced Configuration

Double Elimination Variations

Control specific tournament rules via the config object inside your data:

const config = {
  noSecondaryFinal: true, // No "bracket reset" if Losers winner beats Winners winner.
  noComeback: true,       // Losers bracket stops early (3rd place decider).
  autoMobileCompression: true // Automatically switch to high-density view on small screens.
};

📱 Mobile Support

Bracket Pro is built to be responsive. When screen size is detected as mobile, the bracket can automatically switch to Compressed Mode, showing team codes and minimizing padding to ensure the tournament remains legible on small devices.