Billing cards for SaaS settings — usage meters with thresholds and projections, seats and spend with a priced seat stepper, and a credits balance with top-up packs — that fill, count and spring.
Usage meters
usage-meters.tsxPlan meters that fill with a spring, mark the alert threshold and hatched end-of-cycle projection, and turn to near-limit or over-limit with an icon and a word.
| Prop | Type | Default | Description |
|---|---|---|---|
plan / cycle | string | — | Plan name and reset caption. |
meters | UsageMeter[] | — | { id, label, used, limit, projected?, format?, overageNote? }. |
warnAt | number | 0.8 | Fraction where a meter turns to warning. |
defaultAlerts | boolean | true | Initial state of the email alert switch. |
onAlertsChange / onManage | function | — | Switch and button handlers. |
Seats and spend
seats-spend.tsxA seat grid with pending invites, month-to-date spend against a budget pace line, and a seat stepper that prices the monthly and prorated change before the upgrade.
| Prop | Type | Default | Description |
|---|---|---|---|
plan / seatPrice | string / number | — | Plan name and price per seat a month. |
seatsTotal / seatsUsed / invites | number | — | Seat counts for the grid. |
members | string[] | — | Initials for the avatar stack. |
dailySpend | number[] | — | Spend per day so far this month. |
daysInMonth / monthlyBudget | number | — | Budget pace and projection inputs. |
onAddSeats | (count: number) => void | — | Called with the stepper value. |
Credits balance
credits-balance.tsxCredits on a ring that springs to the new total after a purchase, runway in days from the burn rate, top-up packs as a radio group and an auto-recharge switch.
| Prop | Type | Default | Description |
|---|---|---|---|
balance / capacity | number | — | Credits left and the ring's full value. |
dailyBurn | number | 1860 | Average credits used per day. |
lowDays | number | 10 | Runway below which the card warns. |
packs | CreditPack[] | — | { id, credits, price, note? } top-up options. |
onPurchase | (pack: CreditPack) => void | — | Called on buy; the card adds the credits optimistically. |
Install the whole set
Installs every billing and usage variant at once. Each section above has its own command for a single variant.
Pro installs use your private registry token. Add the @geturui-pro registry once — setup guide. The command works after you get Pro.
Accessibility
- Meters use role="meter" with a value text that includes the status and projection; warning and over-limit states always show an icon and a word.
- Switches are buttons with role="switch", credit packs are a radio group with arrow-key selection, and the seat stepper announces its count.
- Counting numbers keep a static value for screen readers, and reduced motion fills meters and rings without animation.