## Storage Bar (S—131)

A segmented usage bar like phone storage settings: hover a segment or legend item to focus it and read its size.

- URL: https://sundaeui.dev/components/storage-bar
- Category: Cards & data visualization · Art direction: Refined
- Access: Sundae Pro (authenticated install)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/storage-bar.json`
- Tags: bar, settings, usage, segmented, quota, storage

Categories sit side by side in one bar using tones of the foreground colour plus a muted “Other”. Hovering a segment or its legend entry isolates it and swaps the header to that category.
Segments grow in from the left on mount, and the remaining free space is spelled out.

### Usage

```tsx
import { StorageBar } from '@/components/sundae/storage-bar'

<StorageBar />
```

### Props

- `total` (`number`, required): Capacity in GB.
- `parts` (`{ label: string; value: number }[]`, required): Usage by category in GB.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Storage, quotas, plan usage, budget categories.

### When not to use

- Comparing values across time: use a chart.

### Accessibility

- The bar is a meter with aria-valuetext; segments are aria-hidden and the legend buttons carry each value.
- Reduced motion removes the movement and keeps every state change.