# BarList

Ranked rows with a bar behind each name, for tokens by tool, spend by agent or calls by model.

- **Use it for**: Ranked totals: tokens by tool, spend by agent, calls by model.
- **Not for**: Values over time. Try [Chart](https://unseenui.com/components/chart/).

## Installation

```bash
npm install @stackunseen/ui
```

## Usage

```tsx
import { BarList } from '@stackunseen/ui';
import { Card, DonutChart } from '@stackunseen/ui';
import '@stackunseen/ui/styles.css';

<BarList label="Tool calls by tool" headings={["Tool", "Calls"]} items={tools} />
```

## All props

| Prop | Type | Description |
| --- | --- | --- |
| `headings` | `readonly [ReactNode, ReactNode]` | Optional column headings, such as ['Tool', 'Calls']. |
| `items` (required) | `readonly BarListItem[]` | Rows in the order to show them; sort them in your app. |
| `label` (required) | `string` | Names the list for assistive technology. |
| `max` | `number` | The value that fills a bar; defaults to the largest value present. |

## Keyboard

Inert content; the list is read in order.

## Works with

[Card](https://unseenui.com/components/card/), [Table](https://unseenui.com/components/table/), [Tag](https://unseenui.com/components/tag/), [DiffStat](https://unseenui.com/components/diff-stat/), [ElapsedTime](https://unseenui.com/components/elapsed-time/), [Numeric](https://unseenui.com/components/numeric/), [Kbd](https://unseenui.com/components/kbd/), [DotRing](https://unseenui.com/components/dot-ring/), [DotBars](https://unseenui.com/components/dot-bars/), [WeekStrip](https://unseenui.com/components/week-strip/), [HeatKeys](https://unseenui.com/components/heat-keys/), [Sparkline](https://unseenui.com/components/sparkline/)

Page: https://unseenui.com/components/bar-list/