Storage Bar
A segmented usage bar like phone storage settings: hover a segment or legend item to focus it and read its size.
storage-bar.tsxstorage-bar.css
Checking access…
Overview
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.
When to use
- Storage, quotas, plan usage, budget categories.
When not to use
- Comparing values across time: use a chart.
Installation
$
pnpm dlx shadcn@latest add https://sundaeui.dev/r/storage-bar.json$
npx shadcn@latest add https://sundaeui.dev/r/storage-bar.json$
yarn dlx shadcn@latest add https://sundaeui.dev/r/storage-bar.json$
bunx --bun shadcn@latest add https://sundaeui.dev/r/storage-bar.jsonWorks in any React project. Files are written to components/sundae/. Read the source in the stage’s Code view. Pro assets need a personal token. See authenticated installs.
- No dependencies beyond React 18 or later.
- Copy storage-bar.tsx and storage-bar.css into components/sundae/.
- The CSS file is imported by the component, so no extra configuration is needed.
- Import the component and use it as shown below.
Usage
import { StorageBar } from '@/components/sundae/storage-bar'
<StorageBar />Props
| Prop | Type | Default |
|---|---|---|
total*Capacity in GB. | number | — |
parts*Usage by category in GB. | { label: string; value: number }[] | — |
fillSurface: dark or light. | 'dark' | 'light' | 'dark' |
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.
Customization
- Colours are CSS custom properties on .sd-stb; override them in your own stylesheet.
- fill="light" switches the built-in light palette.
FAQ
- Is Storage Bar free?
- Storage Bar is part of Sundae Pro. The live preview is open to everyone; the source installs with a Pro account.
- How do I install Storage Bar?
- Run npx shadcn@latest add https://sundaeui.dev/r/storage-bar.json. The files are written to components/sundae/. It has no dependencies beyond React 18 or later.
- Does Storage Bar support keyboard and screen readers?
- 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.
- Does Storage Bar respect reduced motion?
- Reduced motion removes the movement and keeps every state change.
More like this
All data →Stacked Bars
Data · Refined- Pro
Treemap
Data · Refined Usage Meters
Data · Understated- Pro
Scrub Sparkline
Data · Refined - Pro
Tick Gauge
Data · Refined Countdown Timer
Data · Refined