Lifetime Deal Card React component
A one-time-payment offer card: licence tiers, a struck-through price, a live countdown, spots left, a pays-for-itself line and a guarantee, with a soft glow to make it feel like an event.
About the Lifetime Deal Card component
Lifetime Deal Card is built for launches and one-time offers: a big price with the old one struck through, a live countdown, how many spots are left and a line showing how quickly the deal pays for itself against a monthly plan.
Tabs switch between licence tiers, and when the timer runs out the card says the deal has ended and the button turns off, so an expired offer can't be bought.
When to use it
Use it for launch offers, AppSumo-style deals, early-bird pricing and Black Friday campaigns.
Only use real deadlines and real spot counts. Fake urgency costs more trust than it earns, and in some countries it's against consumer law.
Installation
Add the Lifetime Deal Card component to your project with the shadcn CLI. It lands in components/lifetime-deal-card.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/lifetime-deal-cardOr copy the source by hand and install its dependencies:
npm install clsx tailwind-mergeProps
<LifetimeDealCard /> accepts 14 props, all optional. It also accepts the usual <div> attributes, like className, style, id and aria-*, and passes them to its root element.
| Prop | Type | Default |
|---|---|---|
| theme | "dark" | "light" | "dark" |
| eyebrow | string | "Lifetime deal" |
| title | string | "Pay once. Keep it forever." |
| tiers | { label: string; covers: string; price: number; was: number }[] | DEFAULT_TIERS |
| features | string[] | DEFAULT_FEATURES |
| monthlyPrice What the same thing costs monthly, for the pays-for-itself line. | number | 29 |
| endsAt When the deal ends (ISO date). Leave it out for a rolling window from page load. | string | — |
| windowHours Length of the rolling window, in hours. | number | 71 |
| totalSpots Licences on offer, and how many are left. | number | 500 |
| spotsLeft | number | 83 |
| guarantee | string | "60-day money-back guarantee" |
| currency | string | "$" |
- theme"dark" | "light"Default: "dark"
- eyebrowstringDefault: "Lifetime deal"
- titlestringDefault: "Pay once. Keep it forever."
- tiers{ label: string; covers: string; price: number; was: number }[]Default: DEFAULT_TIERS
- featuresstring[]Default: DEFAULT_FEATURES
- monthlyPrice
What the same thing costs monthly, for the pays-for-itself line.
numberDefault: 29 - endsAt
When the deal ends (ISO date). Leave it out for a rolling window from page load.
string - windowHours
Length of the rolling window, in hours.
numberDefault: 71 - totalSpots
Licences on offer, and how many are left.
numberDefault: 500 - spotsLeftnumberDefault: 83
- guaranteestringDefault: "60-day money-back guarantee"
- currencystringDefault: "$"
Show all 14 propsShow fewer
| ctaLabel | string | "Get lifetime access" |
| onBuy | (tier: LifetimeTier) => void | — |
- ctaLabelstringDefault: "Get lifetime access"
- onBuy(tier: LifetimeTier) => void
npm dependencies
Installed for you by the shadcn CLI.
Lifetime Deal Card FAQ
- How do I set the deadline?
- Pass endsAt as an ISO date. Without it the countdown runs for windowHours from when the page loads, which is handy for demos but shouldn't be used for a real deadline.
- What's the pays-for-itself line?
- The tier price divided by monthlyPrice, rounded up to whole months. Set monthlyPrice={0} to hide it.
- Can I hide the spots bar?
- Yes, totalSpots={0} removes it.
- What happens at zero?
- The tiles are replaced with 'This deal has ended' and the button is disabled.
