Bar List

Values side by side as labelled bars: top products, traffic sources, storage by type.

$ pnpm dlx shadcn@latest add https://dashral.com/r/bar-list.json

House Espresso Blend53 sold$2,014
Hand Grinder10 sold$790
AeroPress19 sold$741
Gayo Arabica, 250 g48 sold$672
Kintamani Natural, 250 g44 sold$660

Installation

$ pnpm dlx shadcn@latest add https://dashral.com/r/bar-list.json

Adds the component, the components it builds on, its npm packages and the theme tokens it uses. Using Dashral often? Add the registry to components.json once:

components.json

1{
2  "registries": {
3    "@dashral": "https://dashral.com/r/{name}.json"
4  }
5}

Then add components by name:

$ pnpm dlx shadcn@latest add @dashral/bar-list

Usage

example.tsx

1import { BarList } from "@/components/dashral/bar-list"
2
3<BarList
4  items={[
5    { label: "/pricing", value: 1240 },
6    { label: "/docs", value: 860 },
7    { label: "/blog", value: 410 },
8  ]}
9  showShare
10  aria-label="Page views by page"
11/>

Examples

Icons and colors

icon before each label, and a color per bar.

Archives343.1 GB
Videos182 GB
Documents11.1 GB
Images4.6 GB

Links and shares

href makes a label a link; showShare adds each value's share of total; hint adds muted text.

Googlegoogle.com71240%
Direct48827%
Newsletterbuttondown.com23113%
Redditreddit.com, old.reddit.com1649%

Top by revenue

One card, three rankings behind tabs: products with units sold, countries with flags and shares, devices.

Top by revenue

Retro 35mm Film Camera212 sold$48,200
Mechanical Keyboard145 sold$31,650
Pour-over Coffee Set354 sold$22,810
Linen Desk Mat241 sold$9,400
Brass Desk Lamp51 sold$6,120

API reference

BarList

Also takes every prop of <ul>(opens in a new tab).

Prop	Type	Default
`items`	`{ label, value, icon?, hint?, meta?, display?, href?, color?, key? }[]` The rows. display replaces the formatted value; color is any CSS color for that bar. Required.	—
`color`	`"primary" \| "neutral" \| "info" \| "success" \| "warning" \| "destructive" \| "highlight"` The bars' color.	`"primary"`
`showRank`	`boolean` Numbers the rows (an ordered list).	`false`
`showShare`	`boolean` Each value's share of total, as a percentage.	`false`
`total`	`number` What shares are of: pass it for a top N of more.	`the values added up`
`max`	`number` The value a full bar stands for.	`the largest value`
`locale / formatOptions`	`string / Intl.NumberFormatOptions` How values are written.	`"en-US"`
`linkAs`	`ElementType` Your router's link for rows with href, e.g. Next.js Link.	`"a"`
`classNames`	`{ item, icon, label, value, track, bar }` Classes for each part.	—
`className`	`string` Extra classes, merged with cn() so yours win.	—

Accessibility

A list (ordered with showRank); every value, and its share, is written out as text, so the bars are hidden from assistive technology.
Give it an aria-label that says what's measured.

Motion

Rows rise in and bars grow from the left, one after another (--duration-considered). Instant with reduced motion.