# Bar List

Ranked rows with a bar sized to each value, for top categories, app usage, votes and standings. Bars grow in one after another, and rows re-rank smoothly when values change.

> Composed · Pro · Data Display — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add pro/bar-list
```

## Import

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

## Variants

- `leaderboard` — Leaderboard: `npx @lumioui/cli add pro/bar-list-leaderboard`
- `poll` — Poll results: `npx @lumioui/cli add pro/bar-list-poll`
- `screen-time` — Screen time: `npx @lumioui/cli add pro/bar-list-screen-time`
- `spending` — Spending categories: `npx @lumioui/cli add pro/bar-list-spending`

## Props

| Prop | Type | Notes |
| --- | --- | --- |
| `items` | `BarListItem[]` | — |
| `max?` | `number` | Value that fills a whole bar. Default: the largest value. |
| `sort?` | `"desc" | "none"` | "desc" ranks by value (rows re-rank on change). Default "desc". |
| `rank?` | `boolean` | Rank numbers before each row. |
| `layout?` | `"track" | "fill"` | Bar placement. Default "track". |
| `tint?` | `BarListTint` | Default bar/disc tint. Default "primary". |
| `leadingShape?` | `"circle" | "square"` | Leading tile shape. Default "circle". |
| `formatValue?` | `(value: number) => string` | Format values. Default locale number. |
| `onItemPress?` | `(item: BarListItem) => void` | Row press — makes rows buttons. |
| `selectedKey?` | `string | null` | Key of the row shown as selected. |
| `className?` | `string` | — |
| `leadKey?` | `string | null` | Key of the row the viewer just chose (a vote, a pick). On the next value change its bar lights first and holds before the other bars grow. |

## Icons rendered

- `shopping-cart` — /icons.html?i=shopping-cart

Source: https://lumioui.com/components/bar-list