Billing overview
ProA billing page where the plan card morphs into a picker and usage, invoices, and card follow.
Billing
Fieldnote Labs workspace
Current plan
Billed monthlyRenews Oct 14, 2026
15 seats · 1M API calls · 100 GBPayment method
Usage this period
Sep 14 – Oct 1312of 15
912,480of 1M
38.4GBof 100 GB
Invoices
Sent to Emma Collins- Growth planSep 14 – Oct 13$199.00Sep 14, 2026Paid
- Log retention add-onCard declined by the bank$36.00Sep 3, 2026Failed
- Onboarding workshopBank transfer, due Sep 27$600.00Aug 28, 2026Due
- Growth planAug 14 – Sep 13$199.00Aug 14, 2026Paid
- The billing settings page of a SaaS app.
- Pages that show plan, usage, payment method, and invoices together.
- Plan changes that should happen in place without leaving billing.
- Use plan-comparison or usage-pricing on a public pricing page.
- Use cancel-flow for the cancellation journey.
- Use usage-meter to show a single quota elsewhere.
Installation
Pro source and install commands unlock with a Pro plan.
Usage
Use this as the billing settings page of a SaaS app. Load plan, usage, card, and invoices from your billing provider and connect Upgrade, Update, Pay now, and Download to it; every charge in the preview is simulated.
import { BillingOverview } from "@/components/arc/blocks/billing-overview/billing-overview"; export default function BillingPage() { return ( <main> <BillingOverview /> </main> );}BillingOverview
A billing settings page: a plan card that morphs into a plan picker with a monthly or yearly switch and a prorated quote, usage meters that fill when seen, a payment card that edits in place and turns its digits when replaced, and an invoice list with download and pay now. Plan, usage, card, and invoices are simulated.
No props.
- Arrow keys, HomeorEnd
- Move between plans in the picker.
- Escape
- Closes the plan picker or cancels card editing.
- The plan picker is a role="radiogroup" of role="radio" buttons; unavailable plans are disabled.
- The price quote updates in a polite live region, and actions are announced in a status region.
- The plan card morphs into the picker and back inside a region whose height springs; the selected plan highlight glides with a shared layoutId.
- Changing copy rises into place while the old line lifts away; totals roll with AnimatedCounter and card digits turn one column at a time.
- Usage bars fill when they scroll into view.
- Reduced motion makes the morph and fills instant.
- Below 780px container width the plan and payment cards stack; below 700px meters go single column and invoice rows wrap.
- Below 480px quote buttons stretch full width, and below 340px the card form fields stack.
- Usage bars animate once when 30% in view.
- The invoice list is not virtualized; paginate long billing histories.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Use as the billing settings page of a SaaS app.
- Load plan, usage, card, and invoices from your billing provider and connect confirmPlan, saveCard, pay, and download to it.
- Quotes prorate a mid-term change for the days left; switching billing period starts a new period today and credits unused time. Replace this with your provider's preview invoice.
- Composes Arc button, badge, input, segmented-control, text-morph, animated-counter, and avatar.
The full library index for assistants is at /llms.txt.