Usage meter
A plan's usage on a billing page: bars fill as the month goes on, turn amber when you're running low and red once you're over, and upgrading makes every bar spring back down.
- API requests / 100,000
- Bandwidth GB / 100 GB
- Storage GB / 10 GB
- Seats / 5
Things to try
- Watch the month go by. The bars fill, turn amber when you're running low and red once you're over.
- Look at the bill. The overage slides into the projected bill.
- Upgrade. The new limits make every bar spring back down while the warnings fold away.
- Point at the ⓘ beside a meter to see what it counts and what going over costs.
Install
npx shadcn@latest add https://your-docs-site/r/usage-meter.jsonDependencies
The install command adds these for you. If you copy the code by hand, install them yourself.
npm install @base-ui/react @hugeicons/core-free-icons @hugeicons/react @remold-ui/react motionHow it works
- Each bar is Base UI's Meter, so it carries the right role and values for assistive tech; the details are Base UI's Tooltip.
- The fills, colours and folding warnings are Motion, and the numbers roll with a small odometer.
The plans and prices are made up.
Two-factor setup
A setting that opens a QR code and code field in place, moves the rows below out of the way, and folds back to one line once it's on.
Wallet
A leather card holder with three cards in it: tap it and the cards slide up and fan out, choose one and it rises to the top while its latest transactions fill in underneath, as Apple Wallet does.