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

Lifetime deal card with a strike-through price, seats-claimed bar, end timer and refund promise.

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

About Pricing Lifetime

Pricing Lifetime is built for launch-week deals: one price with the old one struck through, a countdown to the end of the offer, a bar of seats claimed and a refund promise, all inside a card with a moving border beam.

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

When to use Pricing Lifetime

Product Hunt and launch-week offers.
Indie apps sold once.
Courses and asset libraries.
Founding-member pricing.

How it is built

The beam follows your accent colour, the countdown uses Countdown, and price, seats, features and guarantee are props.

It is composed from Border Beam, Button, Countdown, Progress, 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 Lifetime

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

Glyph template: Four thousand icons, one style.
Terminus template: A terminal with taste.
Lumi template: Drag the slider, buy the app.
Paperclip template: Get paid faster, freelancer.
Cohort template: Sell a course like a creator.
Manifest template: Turn launch day into a sales day.
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
Border Beam: A React border beam: coloured light riding the border of cards, inputs and buttons
Button: An animated React button with six variants, spring press feedback and a width-stable loading state
Countdown: An animated React countdown timer whose digits roll as they tick
Progress: Animated React progress bars and rings on springs, with an indeterminate sweep

Install Pricing Lifetime

npx shadcn@latest add @charcoal/pricing-lifetime

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

Border Beam: A beam of coloured light that rides the border of any card, input or button, with a soft glow outside and an optional wash inside. Nine palettes, rotate or pulse.
Button: Six variants with spring press feedback. The loading state swaps the label for a spinner without changing width.
Countdown: Days, hours, minutes and seconds, with each digit rolling down as it ticks.
Progress: Linear and circular progress on a spring, with an optional indeterminate sweep.

Pricing Lifetime as Markdown