Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProA storage or quota card that splits usage into categories, turns to a warning near the limit and offers the upgrade action only when it matters.
Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.
Use this when a plan has a quota (storage, seats, API calls) and people need to know what uses it and when to act.
Do not use it when usage has no ceiling (use a plain statistic).
It composes meter-group, which the CLI installs for you.
import { MeterGroupStorageBreakdown } from "@/components/meter-group-storage-breakdown"<MeterGroupStorageBreakdown
capacity={100}
items={[
{ label: "Photos", value: 52 },
{ label: "Backups", value: 14 },
]}
upgrade={<Button size="sm">Add storage</Button>}
/>| Prop | Type | Required | Description |
|---|---|---|---|
title | string | optional | - |
capacity | number | required | Total capacity in GB. |
items | MeterGroupItem[] | required | - |
upgrade | React.ReactNode | optional | Shown when usage reaches warnAt. |
warnAt | number | optional | Fraction of capacity that triggers the warning. Default 0.9. |
The pattern ships with a Testing Library test (meter-group-storage-breakdown.test.tsx) that covers the calm state, the warning with the upgrade action, the bar name and a custom threshold.