Usage pricing
ProA pricing calculator that finds your plan as you drag seats and traffic.
Live block · sample data
Estimate your bill
You pay per seat. Each plan includes API traffic up to its limit, then a flat rate per extra million.
Save $864 a year
Breakdown
- Growth seats18 × $24
- $432
- API requests15M used, 5M over at $4 per million
- $20
- Estimated totalPer month, before tax
- $452
- 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.
- 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
Pro source and install commands unlock with a Pro plan.
Usage
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.
example.tsx
import { UsagePricing } from "@/components/arc/blocks/usage-pricing/usage-pricing"; export default function PricingPage() { return ( <main> <UsagePricing /> </main> );}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.
- 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.
- 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.
- 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.
- 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
Give your coding assistant the Markdown reference instead of screenshots.
- 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 Arc slider, segmented-control, animated-counter, text-morph, and button.
The full library index for assistants is at /llms.txt.