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

One honest plan: a big price, everything included, and a guarantee.

Type: Pricing section
Styles: Minimal, Light
Licence: Free, MIT

About Pricing Single

Pricing Single is one honest plan: a big price, everything included and a guarantee, for products that do not need tiers.

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

When to use Pricing Single

Single-product sales pages.
Lifetime deals.
Indie and solo products.
Course and ebook sales.

How it is built

One plan, one button, a feature list and a guarantee line, all plain props.

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 Single

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

Hearth template: A home for your app launch.
Patchnote template: Release notes people actually read.
Copyhouse template: Words that sell, from one writer.
Vault template: Save without thinking about it.
Breathe template: Ten quiet minutes a day.
Nocturne template: A bedside device that fixes your nights.
Pricing Tiers: A React pricing section with three plans, a billing toggle and rolling prices
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
Button: An animated React button with six variants, spring press feedback and a width-stable loading state

Install Pricing Single

npx shadcn@latest add https://charcoalui.com/r/pricing-single.json

Pricing Single is free and MIT licensed. The command installs the section into components/sections along with every component it uses.

Frequently asked questions

Does Pricing Single 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 Single as Markdown