paneui
Charts

Bar List

Ranks items by a single measure.

@paneui/thememotion
PageVisitors
  • /pricing
    18,420
  • /
    15,210
  • /docs/quickstart
    9,840
  • /changelog
    6,120
  • /security
    2,210

Installation

pnpm dlx shadcn@latest add @paneui/bar-list

Usage

Examples

Colour and Icons

When to use

Use it for a ranked breakdown of one measure, such as top pages or referrers. It sorts largest first unless sort="none", and under reduced motion the bars appear without growing.

API Reference

BarList

Also accepts every prop of ul.

items*
{ name: string; value: number; icon?: ReactNode; href?: string }[]
Rows.
formatValue
(value: number) => string
Number format.
sort= "desc"
"desc" | "none"
Order.
color= 4
1 | 2 | 3 | 4 | 5 | 6 | 7 | 8
Chart token (1–8) for the bars.
labels
[string, string]
Column headings.
PropTypeDefaultDescription
items*{ name: string; value: number; icon?: ReactNode; href?: string }[]—Rows.
formatValue(value: number) => string—Number format.
sort"desc" | "none""desc"Order.
color1 | 2 | 3 | 4 | 5 | 6 | 7 | 84Chart token (1–8) for the bars.
labels[string, string]—Column headings.