A light plan upgrade screen comparing the current plan with the new one. A seat slider drives a proration breakdown whose figures count to their new values, next to the card on file and a confirm button.
Upgrade
You keep everything you have today. We credit the unused part of your Starter plan and only charge the difference for the rest of this cycle.
$10.00 per seat / month, 8 seats
$22.00 per seat / month
4 new seats. Invite links go out after you confirm.
npx shadcn@latest add https://hyperblur.dev/r/checkout-subscription-upgrade.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/checkout-subscription-upgrade.tsx.
import { CheckoutSubscriptionUpgrade } from "@/components/hyperblur/checkout-subscription-upgrade"
<CheckoutSubscriptionUpgrade onConfirm={(values) => console.log(values)} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Upgrade" | Pill above the title. Empty hides it. |
| title | string | "Move Halcyon Labs to Business" | Section heading. |
| subtitle | string | Paragraph under the heading. | |
| currentPlan | { name: string; price: number; features: string[] } | Starter, $10 | Plan the customer is on. price is per seat per month. |
| newPlan | { name: string; price: number; features: string[] } | Business, $22 | Plan being upgraded to. |
| currentSeats | number | 8 | Seats on the current plan, used for the credit. |
| defaultSeats | number | 12 | Initial slider value. |
| maxSeats | number | 50 | Slider maximum. |
| daysRemaining | number | 18 | Days left in the billing cycle. |
| cycleDays | number | 30 | Length of the billing cycle in days. |
| renewalDate | string | "Dec 1, 2026" | Date of the next full invoice. |
| cardLabel | string | "Visa ending 4242" | Card on file. |
| currency | string | "USD" | ISO currency code. |
| onSeatsChange | (seats: number) => void | Called when the slider moves. | |
| onChangeCard | () => void | Called by the Change link next to the card. | |
| onConfirm | (values: { plan: string; seats: number; dueToday: number; nextInvoice: number }) => void | Called after the upgrade is confirmed. | |
| accent | string | "#2f7bff" | Highlight, slider and button color. |
| className | string | "" | Extra classes for the section element. |
| style | CSSProperties | Inline styles merged after the accent variable. |