Does Pricing Usage 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 Usage

Usage-based pricing: drag the slider and the monthly estimate rolls to match.

Type: Pricing section
Styles: Dark, Futuristic
Licence: Charcoal UI Pro

About Pricing Usage

Pricing Usage lets buyers drag a slider for their usage and watch the monthly estimate roll to match.

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

When to use Pricing Usage

API and infrastructure pricing.
Pay-as-you-go products.
Email and messaging tools.
Storage and bandwidth plans.

How it is built

Range Slider sets the usage, your pricing function computes the total and Number Ticker rolls it.

It is composed from Range Slider, Number Ticker, Button, 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 Usage

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

Kiln template: Ship-ready docs-first dev tool page.
Aperture template: Know what users do, and why.
Runway template: Push to deploy, in every region.
Sentinel template: Know before your users do.
Payline template: Accept money anywhere with one API.
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 Calculator: A React pricing calculator with sliders, add-ons and an itemised total
Range Slider: Six animated React range sliders on one accessible core: inline, tick, fluid, wave, bubble and ruler
Number Ticker: An animated React number ticker: each digit rolls on its own wheel
Button: An animated React button with six variants, spring press feedback and a width-stable loading state

Install Pricing Usage

npx shadcn@latest add @charcoal/pricing-usage

Pricing Usage 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 Usage 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

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.
Number Ticker: Each digit rolls on its own wheel to the new number, so changes read as motion instead of a flicker.
Button: Six variants with spring press feedback. The loading state swaps the label for a spinner without changing width.

Pricing Usage as Markdown