Premium Upgrade Upsell Card React component
An in-app upgrade card shown near a plan limit: a rotating gradient border, a segmented usage meter, what Pro unlocks, a monthly / yearly switch with an animated per-seat price and savings, a seat stepper with the total, a free-trial button with loading and welcome states, and Maybe later that collapses it into a slim banner.
About the Premium Upgrade Upsell Card component
Premium Upgrade Upsell Card is the moment-of-need upgrade prompt: it appears when someone is close to a plan limit and explains, in one card, what they're running out of, what Pro unlocks and exactly what it will cost for their team.
Prices count smoothly when switching billing or changing seats, yearly savings are spelled out, and the trial starts right from the card with a welcome state afterwards. Maybe later shrinks it into a slim banner instead of making it disappear.
When to use it
Use it inside a dashboard when usage nears a limit, or on a locked feature page in a freemium SaaS.
For a full plan comparison use the Pricing Table block; for a thin site-wide notice use the Announcement Banner.
Installation
Add the Premium Upgrade Upsell Card component to your project with the shadcn CLI. It lands in components/premium-upgrade-upsell-card.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/premium-upgrade-upsell-cardOr copy the source by hand and install its dependencies:
npm install motion clsx tailwind-mergeProps
<PremiumUpgradeUpsellCard /> accepts 9 props, all optional.
| Prop | Type | Default |
|---|---|---|
| used | number | 9 |
| limit | number | 10 |
| monthly | number | 16 |
| yearlyDiscount | number | 0.25 |
| trialDays | number | 14 |
| onUpgrade Return a Promise to show the loading state until checkout starts. | (plan: { billing: "monthly" | "yearly"; seats: number; total: number }) => void | Promise<void> | — |
| onDismiss | () => void | — |
| theme | "dark" | "light" | "dark" |
| className | string | — |
- usednumberDefault: 9
- limitnumberDefault: 10
- monthlynumberDefault: 16
- yearlyDiscountnumberDefault: 0.25
- trialDaysnumberDefault: 14
- onUpgrade
Return a Promise to show the loading state until checkout starts.
(plan: { billing: "monthly" | "yearly"; seats: number; total: number }) => void | Promise<void> - onDismiss() => void
- theme"dark" | "light"Default: "dark"
- classNamestring
npm dependencies
Installed for you by the shadcn CLI.
Premium Upgrade Upsell Card FAQ
- How do I start checkout?
- onUpgrade receives { billing, seats, total }. Start the trial or open your checkout there and return a Promise; the button shows Starting trial… until it resolves, then the welcome state.
- Can I change the price and discount?
- Pass monthly (per seat per month) and yearlyDiscount (0.25 = 25%). The yearly per-seat price, savings line and total are all calculated from them.
- What does Maybe later do?
- It calls onDismiss and replaces the card with a one-line banner showing usage and See Pro. Use onDismiss to snooze the prompt for a while on your side.
- Can I change the features?
- Edit FEATURES at the top of the file. Mark the one that solves the current limit with hot: true so it gets the gradient badge.
- Is it accessible?
- Usage is a role=meter with values, billing is a radiogroup, the seat stepper has labelled buttons, prices are announced politely, the moving border is decorative and stops with reduced motion.
