Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Dashboard blocks

Pro

Usage Billing Dashboard Block for React Aria

Four meters with their tier ladders, a marker where the month's usage sits, the cost worked out tier by tier, invoice lines that add up to the projected invoice and a spend alert you can set.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Read a metered invoice before it arrives, with this usage billing panel for React with React Aria. A hairline frame with a plus mark on each corner puts four meters (API requests, Storage, Seats and Bandwidth) in a start cell as radio rows, each with its usage and projected cost. The cell beside it draws the picked meter's tier ladder: a free allowance, then two paid tiers, with a ring where usage stands on day 19 and a line where it is projected to be at month end, and a table that prices each tier. Under it the invoice lines add up to the projected invoice. The foot has a Switch and a Number Input for a spend alert, and says whether the projection is under or over it. It's built from Switch, Number Input, Native Select and Guides. For billing consoles and usage-based pricing pages.

FAQ

How do I fill it with my own meters?

Edit METERS. Each has a name, the unit, the usage so far, whether it piles up through the month (flow) and its tiers: the first unit each tier prices and the rate in cents per per units. The ladder, the cost of each tier, the invoice lines and the total are all worked out from those. AS_OF is the date the meters were read.

How is the projected invoice worked out?

A meter that piles up (requests, bandwidth) is projected to month end at the pace so far, usage times the days in the month over the days elapsed. A meter that is a level (storage, seats) stays where it is. Each tier then takes the units that fall inside it at its rate, and the lines are added in cents so nothing drifts.

Does the spend alert do anything?

It compares the projected invoice with your limit and says how far under or over it is. Nothing is sent: it is an alert in name only in this page. Turning the switch off dims the limit and says the alert is off. React Aria's number field commits the limit when you leave it or press Enter, so the line under it updates then.

What stays local, and how do I wire it for real?

Everything: usage is typed and no invoice is created. To make it real, read month-to-date usage from your metering service, price it with the same tiers your billing system uses, and send the alert limit to the service that raises it.

How does it look on a phone?

The meters become a select over the detail, the ladder and its table stack under it with the rate folded under each tier's name, and the foot controls wrap under the status line.

All 200 dashboard blocks