Does Pricing Calculator work with Next.js?

Yes. It is a React 19 component styled with Tailwind CSS 4, so it drops into a Next.js page, a Vite app, Remix or Astro.

Can I change the copy and colours?

Yes. The section is a file in your project. Text, links and images are plain props or JSX, and colours come from your theme's CSS variables, so a brand change is a token edit.

Pricing Calculator

Usage calculator: drag seats and volume, toggle add-ons and watch an itemised monthly total update.

Type: Pricing section
Styles: Enterprise, Light
Licence: Charcoal UI Pro

About Pricing Calculator

Pricing Calculator lets buyers price themselves. Sliders set seats and usage, checkboxes add extras, and a dark receipt card shows each line, the annual discount and a total that counts to the new figure.

It is a full-width pricing section for React and Tailwind CSS 4, in a enterprise and light style. Preview it at any width above, then install it with one command.

When to use Pricing Calculator

Usage-based and per-seat SaaS.
Payroll and per-employee products.
Tutoring and service marketplaces.
Databases and infrastructure.

How it is built

Uses Range Slider, Switch and Number Ticker. Seat price, unit price, included units and add-ons are props, so the maths matches your real pricing.

It is composed from Button, Number Ticker, Range Slider, Switch, so installing it also installs those components, and you can restyle each one the same way you would on its own.

Goes well with Pricing Calculator

Pricing Calculator is part of 6 full templates, so you can see it in a finished page.

Relay template: Status updates that write themselves.
Halcyon template: Support that answers in seconds.
Tidepool template: Postgres that scales to zero and back.
Ledger template: Bookkeeping that reads like a newspaper.
Harbor template: Payroll in ten minutes a month.
Tutorly template: The right tutor, this week.
Pricing Tiers: A React pricing section with three plans, a billing toggle and rolling prices
Pricing Single: A free React pricing section for one honest plan with a guarantee
Pricing Comparison: A React pricing comparison table with a sticky plan header
Pricing Usage: A usage-based React pricing calculator with a slider and rolling estimate
Button: An animated React button with six variants, spring press feedback and a width-stable loading state
Number Ticker: An animated React number ticker: each digit rolls on its own wheel
Range Slider: Six animated React range sliders on one accessible core: inline, tick, fluid, wave, bubble and ruler
Switch: An animated React toggle switch whose thumb stretches when pressed, like a real switch

Install Pricing Calculator

npx shadcn@latest add @charcoal/pricing-calculator

Pricing Calculator is part of Charcoal UI Pro: one seat covers all 107 sections, 100 templates and 300 Pro components, for unlimited projects. The command installs the section into components/sections along with every component it uses.

Frequently asked questions

Does Pricing Calculator work with Next.js?: Yes. It is a React 19 component styled with Tailwind CSS 4, so it drops into a Next.js page, a Vite app, Remix or Astro.
Can I change the copy and colours?: Yes. The section is a file in your project. Text, links and images are plain props or JSX, and colours come from your theme's CSS variables, so a brand change is a token edit.

Built from

Button: Six variants with spring press feedback. The loading state swaps the label for a spinner without changing width.
Number Ticker: Each digit rolls on its own wheel to the new number, so changes read as motion instead of a flicker.
Range Slider: Six sliders that share one accessible core: drag, click, or use the arrow, Page and Home/End keys. Every variant respects reduced motion.
Switch: A spring-driven thumb that stretches while pressed, like a real toggle under your thumb.

Pricing Calculator as Markdown