Billing overviewPro

• Type: Block

• Page: https://ui.xzero.co.uk/components/blocks/billing-overview

• Markdown: https://ui.xzero.co.uk/components/blocks/billing-overview/markdown

• Access: Xzero Pro

• Registry id: billing-overview

• Source file: registry/blocks/billing-overview/billing-overview.tsx

• Built from: Button, Badge, Input, Segmented control, Text morph, Animated counter, Avatar

• Keywords: react billing page, subscription management, billing settings, invoice list, usage meters, change plan ui, saas billing

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.

When to use

• 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.

When not to use

• 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

Register both Xzero UI namespaces in your project's components.json:

{
  "registries": {
    "@xzero-ui": "https://mcp.xzero.co.uk/r/{name}.json",
    "@xzero-ui-pro": "https://mcp.xzero.co.uk/r/pro/{name}.json"
  }
}

npx shadcn@4.23.0 add @xzero-ui-pro/billing-overview

Install xzero-foundation once, and import @/components/xzero/foundation.css in your app root. No Xzero token is used by this snapshot. For sample portraits, photos, fonts, or logos, download https://mcp.xzero.co.uk/install-assets.mjs and run node xzero-install-assets.mjs <receiving-project>.

Usage

import { BillingOverview } from "@/components/xzero/blocks/billing-overview/billing-overview";

export default function BillingPage() {
  return (
    <main>
      <BillingOverview />
    </main>
  );
}

API reference

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.

Keyboard interactions

Keys	Action
Arrow keys, Home / End	Move between plans in the picker.
Escape	Closes the plan picker or cancels card editing.

Accessibility

• 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.

Motion

• 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.

Responsive behavior

• 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.

Performance

• Usage bars animate once when 30% in view.
• The invoice list is not virtualized; paginate long billing histories.

Notes for AI

• 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 Xzero button, badge, input, segmented-control, text-morph, animated-counter, and avatar.

Related

• Usage meter: Show what fills an allowance and how close it is to the limit.
• Plan comparison: Compare meaningful differences between plans and billing periods.
• Cancel flow: A cancellation flow that answers each reason with a tailored offer and a calm hold-to-cancel.
• Invoice studio: An editable invoice with live totals and a clear save flow.
• Settings page: Account settings with a gliding section nav and a save bar that morphs in as you edit.

Guidance for AI tools

Blocks are complete, self-contained screens with sample data. Replace the sample data and connect the callbacks described above. Follow the declared prop types and do not invent props. Keep keyboard access, reduced motion support, and both light and dark themes intact when adapting it.

Full library index: https://ui.xzero.co.uk/llms.txt