TournamentBracket
A knockout bracket with connected match cards, round paging, scores, penalties, and explicit winners.
Installation
Import from @gaudi/design-system. Load @gaudi/design-system/global.css once and add transpilePackages: ['@gaudi/design-system'] in Next.js.
Usage
Examples
Playground
Final with a winner
Empty
API
7 props
Accessibility
Labelled match groups expose round and participant names. Native buttons support keyboard navigation; current rounds are announced politely. Winners have a text alternative as well as an icon and weight. Motion respects reduced-motion preferences. One, two or three rounds fit the container without page overflow.
Related
AreaChartFilled areas per series over categories, stacked into a total or overlapping from zero.2 examplesBarChartBars per category: single, grouped or stacked, upright or on their side, with references, annotations and a highlighted bar.2 examplesBoxPlotChartDistributions side by side: median, quartiles, whiskers at 1.5 × IQR and outliers, from raw samples or precomputed summaries.1 exampleChartFrameThe frame every chart renders in: a captioned figure with one keyboard stop and a readout, loading, empty, invalid and error states, locale-aware numbers and a data table built from points. Use it around a custom visual, with the Recharts composition parts and Gaudi primitives.1 exampleComposedChartBars, lines and areas on one category axis, with a right-hand axis for a series in other units.DonutChartParts of a whole as a donut with a centre summary, or a pie (PieChart); slices are selectable and small ones fold into Other.2 examples