Pricing Calculator: React + Tailwind Component

An interactive pricing section that computes the monthly bill live from a usage slider and recommends a plan automatically.

Drag the usage slider to compute each plan's monthly price live: the price figures roll and update on a spring, the "Recommended" badge automatically jumps to the right plan card and highlights it once usage crosses a threshold, switching to annual billing applies the discount, and the cost breakdown at the bottom reveals line by line — a good fit for a SaaS pricing page.

Bring this into your project

Run this command in your project folder. The CLI adds the source and dependencies; then follow the usage example below.

npx webberui@latest add "https://webberui.com/r/pricing-calculator.en.json?t=<install token>"

New project or installation trouble? Start here →

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

Usage limitmax

Default usagedefaultValue

Usage unitunitLabel

Currency symbolcurrency

Annual discount multiplieryearlyDiscount

0.8

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

Active edited usageDefault props

<PricingCalculator/>

    </div>
  );
}

The complete example includes the preview layout and data. Install the component first, then paste this file into your project.

Installation

npx webberui@latest add "https://webberui.com/r/pricing-calculator.en.json?t=<install token>"

Or, once registries are configured in components.json, install it as @webberui/pricing-calculator.

Usage

import { PricingCalculator } from "@/components/ui/pricing-calculator";

<PricingCalculator
  min={1}
  max={50}
  defaultValue={8}
  yearlyDiscount={0.8}
  tiers={[
    {
      name: "Starter",
      description: "For small teams getting started",
      basePrice: 0,
      perUnit: 150,
      upTo: 5,
      features: ["3 projects", "Basic analytics"],
    },
    {
      name: "Pro",
      description: "For growing teams",
      basePrice: 600,
      perUnit: 120,
      upTo: null,
      features: ["Unlimited projects", "Advanced analytics"],
    },
  ]}
/>

Props

Prop	Type	Default	Description
`tiers`	`PricingTier[]`	—	Plan configuration, sorted by usage threshold from low to high
`min`	`number`	`1`	Minimum usage on the slider
`max`	`number`	`50`	Maximum usage on the slider
`step`	`number`	`1`	Slider step value
`defaultValue`	`number`	`8`	Default usage
`unitLabel`	`string`	`"seats"`	Label for the usage unit
`currency`	`string`	`"NT$"`	Currency symbol prefix
`yearlyDiscount`	`number`	`0.8`	Annual billing discount multiplier (0.8 = 20% off)
`className`	`string`	—	Forwarded to the outermost container

PricingTier fields:

Field	Type	Description
`name`	`string`	Plan name
`description`	`string`	One-sentence plan description
`basePrice`	`number`	Base monthly fee
`perUnit`	`number`	Additional monthly charge per unit
`upTo`	`number \| null`	Recommended usage ceiling; above it the next plan is recommended. `null` means no ceiling
`features`	`string[]`	List of plan highlights

Accessibility

The slider is a native input[type="range"], adjustable with the keyboard arrow keys, and carries an aria-label and aria-valuetext (including the unit)
The monthly / annual toggle is a set of buttons inside a role="group", expressing the current state through aria-pressed
The monthly total sits in an aria-live="polite" region, so assistive technology announces the new price whenever usage or the billing period changes
When the user has "reduce motion" enabled at the system level, the price figures jump straight to their final value and the card scaling, badge movement, and breakdown reveal animations are all disabled
Decorative icons (Users, Check, Sparkles) are all marked aria-hidden

Pricing Calculator