Plan cards inside a dialog over a dimmed app, with a monthly and yearly switch, prices that roll on change and a summary bar with Continue. Focus is trapped while open, Escape and the backdrop close it, and focus returns to the Upgrade button.
Pick a plan for Lattice. Switch or cancel any time, unused days are credited.
Pro, billed yearly: $144 per seatEqual to $12 a month. Renews in 12 months.
npx shadcn@latest add https://hyperblur.dev/r/checkout-pricing-modal.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/checkout-pricing-modal.tsx.
import { CheckoutPricingModal } from "@/components/hyperblur/checkout-pricing-modal"
<CheckoutPricingModal defaultOpen={false} onContinue={(s) => console.log(s)} />| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | "Upgrade your workspace" | Dialog heading. |
| subtitle | string | Line under the dialog heading. | |
| plans | { id: string; name: string; blurb: string; monthly: number; yearly: number; features: string[]; badge?: string }[] | Plus, Pro, Scale | Plans. Prices are per seat per month; yearly is the monthly equivalent when billed yearly. |
| defaultPlan | string | "pro" | Id of the plan selected first. |
| defaultPeriod | "monthly" | "yearly" | "yearly" | Initial billing period. |
| defaultOpen | boolean | true | Whether the dialog starts open. |
| workspace | string | "Lattice" | Name in the background app sidebar. |
| currency | string | "USD" | ISO currency code. |
| onOpenChange | (open: boolean) => void | Called when the dialog opens or closes. | |
| onContinue | (selection: { plan: string; period: "monthly" | "yearly"; price: number }) => void | Called by Continue with the plan id, period and price billed per seat. | |
| accent | string | "#6366f1" | Selection ring, badge and button color. |
| className | string | "" | Extra classes for the section element. |
| style | CSSProperties | Inline styles merged after the accent variable. |