Pricing calculatorPro
A seat slider and billing toggle drive plan cards with rolling prices and a moving recommended badge.
Live block · sample data
- Per-seat pricing where showing the exact total for a team size helps people choose.
- Pricing pages with a monthly and yearly toggle and a visible yearly saving.
- Plans with seat caps or volume discounts that are hard to explain in a static table.
- Use usage-pricing when price depends on metered usage rather than seats.
- Use plan-comparison for a feature by feature table across plans.
- Use billing-toggle when you only need the monthly and yearly switch.
Installation
Pro source and install commands unlock with a Pro plan.
Usage
Use this as a starting point and replace the sample data with your own.
example.tsx
import { PricingCalculator } from "@/registry/blocks/pricing-calculator/pricing-calculator"; export function PricingPage() { return <PricingCalculator />;}Built fromMotion
PricingCalculator
A seat based pricing section. A slider picks team size from fixed seat stops, a billing toggle switches monthly and yearly, and three plan cards update prices, totals, volume discounts, and features live. The recommended plan follows the seat count. Plans and prices are constants in the file; the trial is simulated. Also the default export.
No props.
- Arrow keysorHomeorEndorPage UporPage Down
- Native range input: moves between seat stops.
- Arrow keys
- In the billing toggle, switch between monthly and yearly and move focus with the selection.
- EnterorSpace
- Chooses a plan, steps seats with the plus and minus buttons, and starts the trial.
- The slider is a native range input labelled "Team size" with aria-valuetext such as "20 seats".
- Billing is a radiogroup with roving tabindex; plan buttons use aria-pressed for the selected plan.
- Each plan card is labelled by its heading, and each feature list is labelled with the plan name.
- Billing changes, plan picks, and the started trial are announced in a polite live region.
- The selection frame and the Recommended badge are shared layout elements that travel between cards on a spring.
- Prices and totals roll with AnimatedCounter; changed copy crossfades with a short blur.
- Features that appear or disappear with the seat count open and close in height.
- Reduced motion removes the offsets and blur and sets layout and height transitions to zero.
- The root is a size container. At 860px and below the three plan cards stack in one column.
- At 560px and below padding and the title shrink, and the controls tighten.
- At 360px and below the savings line and switch button wrap onto several lines.
- State is a seat index, billing period, and picked plan; everything else is derived on render.
- Twenty three seat stops and three cards, so no memoization or virtualization is needed.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Use for per-seat SaaS pricing where the right plan depends on team size and billing period.
- Edit STOPS, PLANS, recommend, and seatPrice to match your pricing. Starter has maxSeats 10; picking more shows a limit note and a button to drop back to 10 seats.
- Volume pricing takes $2 off each seat from 25 seats and $4 from 100 on Team and Business.
- There are no props. Wire startTrial to your signup or checkout; it currently waits 1.1s. Composes Arc Button and AnimatedCounter.
The full library index for assistants is at /llms.txt.