Billing Card

ProNew

A subscription summary card that shows the plan, price, status, next charge date, payment method, seat usage and recent invoices.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.


pnpm dlx shadcn@latest add @tealmac-pro/billing-card

Prop	Type	Default	Description
`plan`	`BillingPlan`	-	Plan name, price, interval, status, dates and seats.
`paymentMethod`	`{ brand: string; last4: string; expires: string }`	-	Card shown in the payment method row.
`invoices`	`BillingInvoice[]`	`[]`	Recent invoices, newest first. The first three are shown.
`onChangePlan`	`() => void`	-	Adds a "Change plan" button.
`onUpdatePayment`	`() => void`	-	Adds an "Update" button to the payment method row.
`onCancel`	`() => void`	-	Adds a "Cancel subscription" button. Hidden when the plan is canceled.
`locale`	`string`	`"en-US"`	Locale for dates and money.

Also accepts all <section> props.

Prop	Type	Default	Description
`name`	`string`	-	Plan name.
`price`	`number`	-	Price per interval in major currency units.
`interval`	`"month" \| "year"`	-	Billing interval.
`currency`	`string`	`"USD"`	ISO 4217 currency code.
`status`	`"active" \| "trialing" \| "past_due" \| "canceled"`	-	Subscription state. `past_due` adds an alert.
`renewsOn`	`string`	-	ISO date of the next charge, or when access ends if canceled.
`trialEndsOn`	`string`	-	ISO date the trial ends.
`seats`	`{ used: number; total: number }`	-	Seats in use and included. Shown as a meter.

Prop	Type	Default	Description
`id`	`string`	-	Invoice id.
`date`	`string`	-	ISO date (YYYY-MM-DD).
`amount`	`number`	-	Amount in major currency units.
`status`	`"paid" \| "open" \| "failed"`	-	Invoice state.
`href`	`string`	-	Adds a download link.

Status is shown with an icon and a word, not color alone.
Dates are parsed as UTC from ISO strings, so they do not shift between time zones.

Guide and examples


pnpm dlx shadcn@latest add @tealmac-pro/billing-card

Prop	Type	Default	Description
`plan`	`BillingPlan`	-	Plan name, price, interval, status, dates and seats.
`paymentMethod`	`{ brand: string; last4: string; expires: string }`	-	Card shown in the payment method row.
`invoices`	`BillingInvoice[]`	`[]`	Recent invoices, newest first. The first three are shown.
`onChangePlan`	`() => void`	-	Adds a "Change plan" button.
`onUpdatePayment`	`() => void`	-	Adds an "Update" button to the payment method row.
`onCancel`	`() => void`	-	Adds a "Cancel subscription" button. Hidden when the plan is canceled.
`locale`	`string`	`"en-US"`	Locale for dates and money.

Also accepts all <section> props.

Prop	Type	Default	Description
`name`	`string`	-	Plan name.
`price`	`number`	-	Price per interval in major currency units.
`interval`	`"month" \| "year"`	-	Billing interval.
`currency`	`string`	`"USD"`	ISO 4217 currency code.
`status`	`"active" \| "trialing" \| "past_due" \| "canceled"`	-	Subscription state. `past_due` adds an alert.
`renewsOn`	`string`	-	ISO date of the next charge, or when access ends if canceled.
`trialEndsOn`	`string`	-	ISO date the trial ends.
`seats`	`{ used: number; total: number }`	-	Seats in use and included. Shown as a meter.

Prop	Type	Default	Description
`id`	`string`	-	Invoice id.
`date`	`string`	-	ISO date (YYYY-MM-DD).
`amount`	`number`	-	Amount in major currency units.
`status`	`"paid" \| "open" \| "failed"`	-	Invoice state.
`href`	`string`	-	Adds a download link.

Status is shown with an icon and a word, not color alone.
Dates are parsed as UTC from ISO strings, so they do not shift between time zones.