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

Credit packs for AI products with bonus credits and a live readout of what each pack buys.

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

About Pricing Credits

Pricing Credits sells credits instead of subscriptions. Visitors pick a pack, bigger packs show bonus credits and a lower price per thousand, and a bar below shows what that pack buys in images, seconds of video or minutes of audio.

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 Credits

AI image, video and voice tools.
API products sold in credits.
Games and in-app currencies.
Print and render services.

How it is built

Packs and costs are plain data, the per-thousand price is calculated for you, and the readout updates as soon as a pack is chosen.

It is composed from 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 Credits

Pricing Credits is part of a full template, so you can see it in a finished page.

Lattice template: Generate, keep, sell.
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

Install Pricing Credits

npx shadcn@latest add @charcoal/pricing-credits

Pricing Credits 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 Credits 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.

Pricing Credits as Markdown