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

Three plans with a monthly/yearly switch; prices roll to the new amount and the popular plan glows.

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

About Pricing Tiers

Pricing Tiers shows three plans with a monthly and yearly switch; prices roll to the new amount and the popular plan glows.

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

When to use Pricing Tiers

SaaS pricing pages.
Subscription products.
Freemium tools.
Membership sites.

How it is built

Segmented Control switches billing, Number Ticker rolls each price and Animated Border marks the recommended plan.

It is composed from Segmented Control, Number Ticker, Animated Border, 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 Tiers

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

Ember template: An AI product site that glows.
Quill template: Ask your data, get answers.
Meridian template: The CRM for teams under fifty.
Tessera template: Every meeting, already written up.
Vellum template: Find anything your team ever wrote.
Cadence template: Book meetings without the back-and-forth.
Lane template: Catch the bug in review, not in prod.
Keystone template: Login, done in an afternoon.
Fieldwork template: Senior engineers, on retainer.
Groove template: One great record, every month.
Summit template: Memberships, classes and coaches.
The Margin template: A publication with paying readers.
Tally template: Cards, receipts and budgets in one place.
Canopy template: Insurance explained in plain English.
Nourish template: A coach in your pocket, a plan on your plate.
Trailhead template: Guided hikes, every weekend.
Lotus template: Classes, teachers and a timetable.
Kindred template: Find a therapist you actually click with.
Darkroom template: A course people finish.
Forkcamp template: From zero to hired in 16 weeks.
Lingo template: Speak a new language in 15 minutes a day.
Sprout template: Coding classes kids beg to go to.
Commons template: Bring your members home.
Hive template: Desks, rooms and people worth sitting near.
Campfire template: Group chat that stays readable.
Backstage template: Members-only videos, done properly.
Relaunch template: Announce the big new version.
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
Pricing Calculator: A React pricing calculator with sliders, add-ons and an itemised total
Segmented Control: An animated React segmented control with a pill that glides to the selected option
Number Ticker: An animated React number ticker: each digit rolls on its own wheel
Animated Border: A React card with an accent highlight travelling around its border, CSS only
Button: An animated React button with six variants, spring press feedback and a width-stable loading state

Install Pricing Tiers

npx shadcn@latest add @charcoal/pricing-tiers

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

Segmented Control: Two to five exclusive options with a pill that glides to the selection. Arrow keys move and select.
Number Ticker: Each digit rolls on its own wheel to the new number, so changes read as motion instead of a flicker.
Animated Border: An ember highlight travels around the card's border. CSS only, using @property.
Button: Six variants with spring press feedback. The loading state swaps the label for a spinner without changing width.

Pricing Tiers as Markdown