Subscription plan picker with a highlighted plan, feature list and restore link.
npx shadcn@latest add @lokalhost/pricing-plansAlso installs Buttons.
The source is copied to components/blocks/pricing-plans.tsx — it’s yours to edit.
import { PricingPlans } from "@/components/blocks/pricing-plans";
<PricingPlans
plans={PLANS}
value={plan}
onChange={setPlan}
features={["Unlimited projects", "Cloud sync across devices", "All 40+ templates"]}
onContinue={() => console.log("purchase", plan)} // call RevenueCat / StoreKit here
onRestore={() => console.log("restore")}
/>| Prop | Type | Default | Description |
|---|---|---|---|
plansrequired | { id; name; price; period; badge? }[] | — | Selectable plans. |
valuerequired | string | — | Selected plan id. |
onChangerequired | (id: string) => void | — | Selection handler. |
onContinuerequired | () => void | — | Primary action. |
onRestore | () => void | undefined | Restore purchases link. |
features | string[] | [] | Checklist above the plans. |
loading | boolean | false | Spinner on Continue while purchasing. |