Horizontal ranking bars with rank, label, value and share of total, plus optional delta badges and an animated show more toggle.
npx shadcn@latest add https://hyperblur.dev/r/ranked-bars.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/ranked-bars.tsx.
import { RankedBars } from "@/components/hyperblur/ranked-bars"
<RankedBars items={[{ label: "United States", value: 18420, delta: 6.2 }, { label: "Germany", value: 9810 }]} limit={5} />| Prop | Type | Default | Description |
|---|---|---|---|
| items | { label: string; value: number; delta?: number }[] | seven sample pages | Rows in the order shown. delta is a percent change and adds an up or down badge. |
| limit | number | 5 | Rows shown before the toggle. Extra rows reveal with a height animation. |
| color | string | "#2f7bff" | Bar color. |
| showShare | boolean | true | Show each row's share of the total. Hidden automatically in very narrow containers. |
| showRank | boolean | true | Show the rank number before each label. |
| valueFormatter | (n: number) => string | Formats row values. Defaults to grouped digits, compact above 10,000. | |
| expanded | boolean | Controlled expanded state of the extra rows. | |
| defaultExpanded | boolean | false | Initial expanded state when uncontrolled. |
| onExpandedChange | (expanded: boolean) => void | Called when the toggle is pressed. | |
| moreLabel | string | Toggle text while collapsed. Defaults to "Show N more". | |
| lessLabel | string | "Show less" | Toggle text while expanded. |
| animate | boolean | true | Grow the bars in one after another on mount. |