Usage Estimator
Prov1.0.0A usage cost calculator that shows when the next plan up becomes the cheaper one.
Build for your project
Code/install build
Usage
Import it and pass your content. The props that matter most are listed next.
Example
import { UsageEstimator } from "@/components/ui/notchset/blocks/usage-estimator";
export function Estimate() {
return (
<UsageEstimator
plans={[
{ id: "team", name: "Team", base: 199, runs: 50_000, seats: 5, perThousand: 4, perSeat: 24 },
{ id: "scale", name: "Scale", base: 899, runs: 400_000, seats: 20, perThousand: 2, perSeat: 20 },
]}
onSwitch={(plan) => console.log("switch to", plan.id)}
/>
);
}Props
plans–[UsagePlan, UsagePlan]Two plans, smaller first: { id, name, base, runs, seats, perThousand, perSeat }.
runsRange / seatsRange–{ min, max }The sliders' ranges (runs on a log scale).
defaultRuns / defaultSeats–numberWhere the sliders start.
onSwitch / currency–(plan) => void / (n) => stringThe advice's switch action and money formatting.
Anatomy
- One block; the plan switch is the Segmented Control, the sliders are its own.
- Costs are base + extra seats + runs over the allowance, from the plans you pass.
- Switching is your onSwitch.
UsageEstimatordata-slot="usage-estimator"Inputs, breakdown, chart and advice.
Source
components/ui/notchset/blocks/usage-estimator.tsx
This component is included with Pro.
Try the live preview above. Get Pro to install the source.
Build for your project
Code/install build
Installation
pnpm dlx shadcn@latest add @beautiful-ui-pro/usage-estimatorNeeds your registry key. Your components.json style picks the Base UI or Radix build: radix-*, new-york and default get Radix, base-* gets Base UI.
Styles didn't apply?
The CLI adds the styles to the CSS file named in components.json (tailwind.css). Check that it points at your global stylesheet, that the project uses Tailwind CSS v4, and that the file is imported in your root layout. Installed by hand: paste styles.css into that file.
For coding agents
Give your coding assistant the Markdown guide instead of screenshots.
Use it for
- Usage-based pricing with an allowance and overage
- Helping buyers see when to move up a plan
Use something else when
- Flat per-seat prices: use Seat Pricing
- A bill that already happened: show the invoice
Mistakes to avoid
- Use your real price book: this is an estimate, so say so where you bill
- Keep the two plans comparable (same units for runs and seats)
Agents find it by
- usage pricing, pricing calculator, cost estimator, metered billing, overage, plan crossover, Notchset
Where agents read it
- Guide for this component: https://beautiful-ui.dev/md/usage-estimator.md
- Every component, for tools without MCP: /llms.txt
- MCP server:
https://beautiful-ui.dev/api/mcp(setup)
Behaviour
Keyboard
- ← →
- Step runs or seats (Shift: ×10)
- Home / End
- The ends of the range
Accessibility
- Both sliders are real sliders with value text; allowance notes are announced
- The chart is one image with a summary (plans, seats, the crossover); the advice is announced as it changes
Motion
- Inputs
- Breakdown lines and the total roll
- Seats
- Both curves glide to their new shape (520ms)
- Marker
- Follows your runs; its tag flips past 70%
Responsive
- The chart drops under the inputs under 760px (container width).
Performance
- 49 samples a curve and a 400-step crossover search: well under a millisecond.
Changelog
v1.0.0 · 2026-10-04
First release
Part of
Included with Pro
Pro is in early access.
