Billing
BlockA billing page: the current plan, metered usage against its limits, the payment method and the invoice history.
- SaaS
- 6 components
- 1 file
Loading the example…
pnpm dlx @dowel-ui/cli add billingimport { BillingBlock } from "@/components/blocks/billing";<BillingBlock>
| Prop | Type | Default |
|---|---|---|
plan (required) | BillingPlan | — |
actionsAnything extra beside the heading. | ReactNode | — |
invoices | BillingInvoice[] | [] |
onChangePlan | () => void | — |
onUpdatePaymentMethod | () => void | — |
paymentMethod | BillingPaymentMethod | — |
usage | BillingUsage[] | [] |
className | string | — |
Every usage meter states where it stands in words — "8 of 10 seats used, 2 left", or how far over the limit it is — because a bar that turns red says nothing to a screen reader and nothing to anyone who cannot tell the colours apart; the bar itself is hidden from the accessibility tree so the same fact is not announced twice. Each invoice download is named after its invoice rather than being one of ten identical "Download" links, which is all a links list would show. A card's last four digits are spoken as digits instead of as a four-figure number. Dates carry a machine-readable time element.