Usage pricingPro

• Type: Block

• Page: https://ui.xzero.co.uk/components/blocks/usage-pricing

• Markdown: https://ui.xzero.co.uk/components/blocks/usage-pricing/markdown

• Access: Xzero Pro

• Registry id: usage-pricing

• Source file: registry/blocks/usage-pricing/usage-pricing.tsx

• Built from: Slider, Segmented control, Animated counter, Text morph, Button

• Keywords: react pricing calculator, usage based pricing, seat pricing slider, pricing page component, plan recommender, monthly yearly toggle, saas pricing

Use this on a pricing page for seat and usage based plans. Replace the plan table with your own rates and limits and connect the trial button to signup.

When to use

• Pricing pages for plans priced by seats plus usage.
• Calculators that should recommend a plan as people move sliders.
• Monthly and yearly toggles where the saving should be visible in the breakdown.

When not to use

• Use plan-comparison for a side by side table of fixed tiers.
• Use usage-forecast to project spend for an existing customer.
• Use billing-overview for the settings page of someone already subscribed.

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/usage-pricing

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 { UsagePricing } from "@/components/xzero/blocks/usage-pricing/usage-pricing";

export default function PricingPage() {
  return (
    <main>
      <UsagePricing />
    </main>
  );
}

API reference

UsagePricing

A pricing calculator with seat and traffic sliders and a monthly or yearly toggle that recommends a plan, shows its features, and breaks down the cost. Plan rates, limits, and features are sample data.

No props.

Accessibility

• The plan card and breakdown are labelled sections tied to their headings with aria-labelledby.
• Plan changes are announced in a polite live region with the plan name and reason.
• The decorative meter is aria-hidden; the numbers are real text.

Motion

• Prices roll with the animated counter and plan names morph with text-morph as sliders move.
• The feature list reflows as items are added or removed for the recommended plan.
• Reduced motion drops the layout and entrance animations.

Responsive behavior

• At 780px container width and above the plan card sits in its own column beside the sliders; below that everything stacks.
• The block caps at 1060px and clips its own overflow, so it fits any page column.

Performance

• Prices roll with the animated counter and the feature list reflows with layout animation on each slider change.
• A ResizeObserver drives the height morph of the plan card.

Notes for AI

• Use on a pricing page for seat plus usage based plans.
• Replace the plan table, rates, and limits with your own; the trial button only sets local state, so route it to signup.
• Composes Xzero slider, segmented-control, animated-counter, text-morph, and button.

Related

• Plan comparison: Compare meaningful differences between plans and billing periods.
• Slider: Pick a value or a range on a track that follows your finger.
• Animated counter: Give changing totals a clear sense of movement.
• Segmented control: Switch between a small set of related views.
• Usage forecast: A billing period usage chart with a forecast cone and a draggable budget that dates the crossing.

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