Dev Design Library

Knockout Bracket

Pages one round at a time. The leftmost round stacks at a fixed rhythm, each later round centers between its two feeder matches, and cards, elbow connectors, headers and stage height animate into every new layout. A third place play-off sits below the tree under its own rule. Round names, team artwork, dates and result chips all come from the data you pass.

Knockout Bracket preview
Library
beUI
Framework
React
Type
component
License
MIT
Install
npx shadcn@latest add @beui/knockout-bracket
Files
  • components/motion/knockout-bracket.tsx
  • lib/ease.ts
  • lib/i18n.tsx
  • lib/utils.ts
Source
https://github.com/starc007/ui-components

Categories

More from beUI