Usage pricingPro
A pricing calculator that finds your plan as you drag seats and traffic.
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
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 { UsagePricing } from 'animui/usage-pricing';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 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.
import { UsagePricing } from "animui/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 animui slider, segmented-control, animated-counter, text-morph, and button.
The full library index for assistants is at /llms.txt.