Bar List

Installation

npx shadcn@latest add @blank/bar-list

Usage

import { BarList } from "@/components/ui/bar-list"

<BarList
  data={[
    { name: "/", value: 4120 },
    { name: "/pricing", value: 754 },
  ]}
/>

Bars are drawn relative to the largest value and sorted largest first; set sortOrder="none" to keep your order. Any non-zero value keeps a sliver of bar so small rows never look empty.

Examples

Clickable rows

With onValueChange every row becomes a button. A row with an href renders as a link instead, so a row never nests one control inside another.

API Reference