Billing overviewPro
A 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
Install animui once, then import any component or block from its typed package entry.
React 19 and React DOM 19 are required. The package includes Free and Pro entries, styles and TypeScript declarations.
npm install https://animui.stracture.net/__local/package.tgzLoad the stylesheet once at your app root, then use the typed component import:
import 'animui/styles.css';
import { BillingOverview } from 'animui/billing-overview';Read the Code tab for the implementation files and the API reference below for required props.
Download animui 0.3.0 · Agent guideUsage
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 "animui/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 animui button, badge, input, segmented-control, text-morph, animated-counter, and avatar.
The full library index for assistants is at /llms.txt.