# Meter Bar

Segmented bar for storage, budgets and allocation, with a legend. Segments fill in turn and glide to new sizes, and anything past the limit turns red.

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

## Install

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

## Import

```tsx
import { MeterBar } from "@/components/ui/meter-bar/meter-bar";
```

## Variants

- `budget` — Budget over limit: `npx @lumioui/cli add pro/meter-bar-budget`
- `data-plan` — Single meter with threshold: `npx @lumioui/cli add pro/meter-bar-data-plan`
- `portfolio` — Portfolio mix: `npx @lumioui/cli add pro/meter-bar-portfolio`
- `storage` — Storage breakdown: `npx @lumioui/cli add pro/meter-bar-storage`

## Props

| Prop | Type | Notes |
| --- | --- | --- |
| `segments` | `MeterSegment[]` | — |
| `max?` | `number` | Capacity. Default: the segment sum (a full allocation bar). |
| `size?` | `"sm" | "md" | "lg"` | Track thickness: sm 6 · md 10 · lg 16. Default "md". |
| `threshold?` | `{ value: number` | Warning line on the track. |
| `label?` | `string }` | — |
| `limitLabel?` | `string` | Label under the limit tick when over. Default "Limit". |
| `legend?` | `"inline" | "list" | "none"` | Legend style. Default "inline". |
| `formatValue?` | `(value: number) => string` | Format values for the legend and a11y. Default locale number. |
| `showPercent?` | `boolean` | Show each segment's share of `max` in the list legend. Default false. |
| `selectable?` | `boolean` | Legend items focus their segment on tap. |
| `selectedKey?` | `string | null` | Controlled focused segment key. |
| `defaultSelectedKey?` | `string | null` | Uncontrolled initial focused key. |
| `onSelectedKeyChange?` | `(key: string | null) => void` | — |
| `releaseHold?` | `boolean` | Act, hold, resolve on shrink: a segment's freed slice goes ghost,  holds ~650ms, then folds away while the rest slide in, and a sheen  crosses the track. Default false (shrinks glide straight away). |
| `onRelease?` | `() => void` | With `releaseHold`: fires as the fold starts, after the hold. |
| `trackClassName?` | `string` | Extra classes for the track. |
| `className?` | `string` | — |

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