Display ranked data in a clean, horizontal bar list similar to Google Analytics. It provides a visual representation of key metrics for quick insights.

This component has been deprecated. We recommend using the Leaderboard component instead.

Page visits by section

Unique visits for the most viewed docs pages this month

Documentation

1200 visits

980 visits

760 visits

430 visits

150 visits

Installation

Install the component via the CLI in one command.

npm

pnpm

yarn

bun

npx shadcn@latest add @intentui/bar-list

Manual installation

Use this approach if you prefer to install and wire up the component yourself instead of using the CLI.

Examples

Controlled

Controlled bar lists allow you to manage the data and interactions dynamically, making it easier to update or change the displayed information based on user actions or other events.

Department budget usage

Select a department to inspect budget usage

$45,000

$38,000

$29,000

$17,500

$13,200

Component API

The BarList component displays ranked values as horizontal bars.

Prop	Type	Default
`className`	`string`	-
`data`	`Bar<T>[]`	`[]`
`onValueChange`	`(payload: Bar<T>) => void`	-
`sortOrder`	`"ascending" \| "descending" \| "none"`	`descending`
`valueFormatter`	`(value: number) => string`	`(value) => value.toString()`

Unlock the full power of
Intent UI Design

Build modern web apps faster with 1000+ resources across components, blocks, patterns, templates, and starter kits.

Learn more

Leaderboard