Add billing and usage
Charging money is four screens, and only the first one usually gets built. This is the rest — what plan am I on, how much have I used, where are my receipts, and how do I leave.
Take all 5 at once
npx hoverlab add pricing-tiers billing-plan-summary usage-meter-panel invoice-history-table settings-danger-zoneOr through the shadcn CLI, with nothing installed first:
npx shadcn@latest add https://hoverlab5.netlify.app/r/path-billing.jsonThis path is a published registry item — one name that pulls in all 5 blocks. Or work down the list and copy each one from its page; the order is what matters, not how the files get there.
- 1
The public page, because it sets every number the account screens have to agree with. Decide the plans here once rather than in four places.
- 2
Current plan, renewal date, the upgrade button. The first thing anyone opens billing to check, so it goes at the top with no scrolling.
- 3
How much of the plan is spent. This is what makes an upgrade feel like the customer’s idea instead of yours — and what stops the overage invoice being a surprise.
- 4
Dated rows with a download on each. Someone’s finance team will ask for a PDF from four months ago, and this is the difference between a link and a support ticket.
- 5
Cancelling, in the open. Hiding it does not keep anyone; it just means they cancel through their bank and dispute the last charge on the way out.
When you are done
Wire the plan and usage numbers to your payment provider’s API. The blocks take plain values, so the shape of that data is yours to decide.