# Storage Meter

> A storage breakdown like cloud drives and OS settings have: one rounded bar split into colored segments, a summary that turns amber then red as space runs out, and a legend with each category's icon and size plus what's left. Point at a segment or row and the rest dim while a bubble shows its share. Sweeps in on load, has a compact sidebar variant, and reads out as a Base UI Meter.

- Slug: `storage-meter`
- Category: [Loaders](https://www.assembli.design/category/loaders.md)
- Type: component
- Tags: storage, meter, usage, quota, progress, stacked-bar, settings, base-ui
- npm dependencies: @base-ui/react
- shadcn/ui dependencies: none
- Live preview: https://www.assembli.design/preview/storage-meter
- Page: https://www.assembli.design/components/storage-meter

![Storage Meter preview](https://www.assembli.design/thumbnails/storage-meter-light.png)

## Props

Other props pass through to the root element.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `segments` (required) | `StorageSegment[]` |  |  |
| `total` (required) | `number` |  | Capacity in bytes. |
| `title` | `React.ReactNode` | `"Storage"` |  |
| `action` | `React.ReactNode` |  | A button or link in the header, such as Manage or Upgrade. |
| `variant` | `"default" \| "compact"` | `"default"` | `default` shows a legend with sizes; `compact` is a slim bar and one line, for sidebars. |
| `warning` | `number` | `0.8` | Share of capacity (0–1) where the summary turns amber. Red starts at `danger`. |
| `danger` | `number` | `0.95` |  |

## Install

One-time setup (needs a subscription):

1. Add the registry to the project's `components.json`: `{"@assembli":{"url":"https://www.assembli.design/r/{name}.json","headers":{"Authorization":"Bearer ${ASSEMBLI_API_KEY}"}}}` (merge into `"registries"`).
2. Put an API key from https://www.assembli.design/account in `.env.local` as `ASSEMBLI_API_KEY=asm_…`.

Then install with the shadcn CLI (writes `components/storage-meter/storage-meter.tsx` and installs dependencies):

```bash
npx shadcn@latest add @assembli/storage-meter
```

Registry item JSON: https://www.assembli.design/r/storage-meter.json (send `Authorization: Bearer <api key>`)

## Code

> Component source needs an Assembli subscription ($12/month or $96/year) and an API key sent as `Authorization: Bearer <key>`. To get one without copying anything, POST https://www.assembli.design/api/agent/login (or call the MCP tool connect_account), show the user the link it returns, and poll https://www.assembli.design/api/agent/token for the key. Or subscribe at https://www.assembli.design/pricing and create a key at https://www.assembli.design/account.