design-infraReport a problem or share feedback← Catalog
Fixtures Knockout Bracket
freebeui/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.
$
npx shadcn@latest add @beui/knockout-bracketnpm deps: clsx, lucide-react, motion, tailwind-merge
- Source
- beUI (free)
- Kind
- block
- Categories
- dashboard
- Use as
- drop-in — replaces your component
- Applies to
- dashboard
- Motion
- on state · medium · motion · medium cost
- Tags
- react, tailwind-v4, motion, blocks
- Licence
- MIT — Copyright (c) 2026 Saurabh Chauhan; retain the upstream notice when copying source.
- Live demo
- beui.dev
- Docs
- beui.dev
Similar
Compare all 4 →- App shelloc/app-shellProduct app frame on the shadcn sidebar: brand header, grouped nav with badges, user dropdown, icon-collapse (Cmd/Ctrl+B) and mobile sheet; header bar with breadcrumbs + action slot; content slot.
- Data table cardoc/data-table-cardshadcn table in a card with toolbar: search, faceted filter, actions slot, sortable columns, row selection and pagination. Badge columns are server-safe; `cell` renderers need a client page.
- Stat cardsoc/stat-cardsDashboard KPI tiles: label, big value, delta chip (invertible for churn/latency) and an SVG sparkline in --chart-1.