Connected Apps
Settings
Source and install need .
pnpm dlx shadcn@latest add @assembli/billing-settingsBilling Settings
The plan and billing page of an app's settings: current plan with seats and renewal, Change plan, and a Cancel that confirms inline. Usage meters hatch toward where the period is heading and estimate overage past the limit. The card on file warns as it nears expiry, the billing contact edits in place, and invoices carry status badges, downloads and Retry on a failed charge.
- Dependencies
- lucide-react(npm, opens in a new tab)
Props
Other props pass through to the root element.
plan*
BillingPlan
usage
UsageMeter[]
Default
[]period
{ start: string; end: string }
ISO dates of the current billing period, for the usage header and its countdown.
paymentMethod
PaymentMethod | null
contact
BillingContact
invoices
Invoice[]
Default
[]invoiceLimit
number
Default
5Invoices shown before "Show all".
currency
string
Default
"USD"locale
string
Default
"en-US"now
string
Today, as an ISO date, for expiry warnings and countdowns. Defaults to the visitor's clock after hydration.
title
React.ReactNode
Default
"Plan & billing"description
React.ReactNode
Default
"Manage your subscription, usage and invoices."onChangePlan
() => void
onCancelPlan
() => Promise<void> | void
May be async. The plan then shows as canceling until the renewal date.
onResumePlan
() => Promise<void> | void
onUpdatePaymentMethod
() => Promise<void> | void
onContactChange
(contact: BillingContact) => Promise<void> | void
onRetryInvoice
(invoice: Invoice) => Promise<void> | void
Retry a failed charge. Resolving marks the invoice paid.
onDownloadInvoice
(invoice: Invoice) => void
| Description | |||
|---|---|---|---|
| plan* | BillingPlan | – | |
| usage | UsageMeter[] | [] | |
| period | { start: string; end: string } | – | ISO dates of the current billing period, for the usage header and its countdown. |
| paymentMethod | PaymentMethod | null | – | |
| contact | BillingContact | – | |
| invoices | Invoice[] | [] | |
| invoiceLimit | number | 5 | Invoices shown before "Show all". |
| currency | string | "USD" | |
| locale | string | "en-US" | |
| now | string | – | Today, as an ISO date, for expiry warnings and countdowns. Defaults to the visitor's clock after hydration. |
| title | React.ReactNode | "Plan & billing" | |
| description | React.ReactNode | "Manage your subscription, usage and invoices." | |
| onChangePlan | () => void | – | |
| onCancelPlan | () => Promise<void> | void | – | May be async. The plan then shows as canceling until the renewal date. |
| onResumePlan | () => Promise<void> | void | – | |
| onUpdatePaymentMethod | () => Promise<void> | void | – | |
| onContactChange | (contact: BillingContact) => Promise<void> | void | – | |
| onRetryInvoice | (invoice: Invoice) => Promise<void> | void | – | Retry a failed charge. Resolving marks the invoice paid. |
| onDownloadInvoice | (invoice: Invoice) => void | – |
