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

Pay-what-you-want block where each preset amount says what it pays for, with a goal bar.

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

About Pricing Donation

Pricing Donation helps people give with confidence. Every preset amount says what it pays for, a custom amount works too, a monthly toggle doubles the impact, and a photo card shows how close you are to the goal.

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

When to use Pricing Donation

Charities and nonprofits.
Open-source sponsorship.
Creator and reader funding.
Crowdfunding reward tiers.

How it is built

Amounts are accessible radio buttons, the impact line updates live, and the goal, raised amount and backer count are props.

It is composed from Button, Progress, Segmented Control, 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 Donation

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

Hexwork template: The framework, and the people behind it.
Frequency template: Listener-funded radio, live worldwide.
Seedling template: Raise money for something that grows.
Patron template: Let your audience fund the work.
Tideline template: A nonprofit site that raises money.
Kickstart template: Back the first production run.
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
Progress: Animated React progress bars and rings on springs, with an indeterminate sweep
Segmented Control: An animated React segmented control with a pill that glides to the selected option

Install Pricing Donation

npx shadcn@latest add @charcoal/pricing-donation

Pricing Donation 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 Donation 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.
Progress: Linear and circular progress on a spring, with an optional indeterminate sweep.
Segmented Control: Two to five exclusive options with a pill that glides to the selection. Arrow keys move and select.

Pricing Donation as Markdown