Billing
The billing settings screens: current plan, invoice history, saved cards, and the add-card form.
Four blocks that usually sit on one settings page. Each is self-contained, so you can adopt the pieces you need rather than the whole screen. See also Billing Address for the address form these pair with.
Pro plan
Active$29
/month
Seats used
8 / 10
Plan statuses
status changes more than the badge: the usage row only renders for active, because a past-due or cancelling plan wants attention on the problem rather than on seat counts.
Pro trial
Trial$0
/month after trial
14 days left in your trial. Add a payment method to keep access when it ends.
Pro plan
Past due$29
/month
Pro plan
Canceling$29
/month
Your plan will end on March 15, 2027. You'll keep access until then.
Invoice history
Billing history
No invoices yet
Your billing history will appear here once you're charged.
Payment methods
These render card UI only. They never touch a card number in a way that would put you in scope for PCI — wire the form to your payment provider's tokenisation (Stripe Elements or equivalent) rather than posting raw fields to your own server.
Payment method
No payment method on file
Copy the source
Blocks are composition examples, not configurable components. Rather than adding props for a layout they don't support, copy the file into your own project and edit it: change the columns, swap the sample data, delete the parts you don't need. Nothing here introduces a primitive you can't already import on its own.