Plan picker
Billing plans with a monthly/yearly switch that rolls the prices like a counter, a lifted recommended card, and the pro-feature gate dialog that scales and un-blurs into view.
Interactive preview · desktop · dark
Installation
Installation is available on the Startup and Business plans. Your personal install command appears here once you have access.
Usage
Import it, pass your props, and make it part of your product.
example.tsx
import { PlanPicker } from '@/components/component-kit/items/block-plan-picker';
export function Example() { return <PlanPicker currentPlanId="solo" onSelect={(plan, interval) => console.log(plan.id, interval)} />;}Props
| Prop | Type | Default | Description |
|---|---|---|---|
plans | Plan[] | Solo, Startup, Business | Plans to show; each has monthly and yearly per-month prices, features and an optional recommended flag. |
currentPlanId | string | "solo" | The plan marked Current; its button is disabled. |
defaultInterval | "month" | "year" | "month" | The initial billing interval. |
currency | string | "$" | Currency symbol shown before prices. |
onSelect | (plan: Plan, interval: BillingInterval) => void | undefined | Called when a plan is chosen, from a card or the upgrade dialog. |
contentClassName | string | undefined | Class for the portalled upgrade dialog. |
autoPlay | boolean | false | Flip the interval every 2.2s after hydration; for inert previews. |