Plan picker for billing settings: monthly/yearly toggle with computed savings, keyboard-navigable radio cards, current plan marker and a pending confirm button.
import { PlanSelector } from "@/components/ui/plan-selector"
export default function PlanSelectorDemo() {
return (
<div className="flex min-h-screen items-center justify-center p-6">
<PlanSelector currentPlanId="starter" plans={[
{ id: "starter", name: "Starter", description: "For individuals", monthly: 9, yearly: 86, features: ["3 projects", "Basic analytics", "Email support"] },
{ id: "pro", name: "Pro", description: "For growing teams", monthly: 29, yearly: 278, recommended: true, features: ["Unlimited projects", "Advanced analytics", "Priority support"] },
{ id: "business", name: "Business", description: "For organizations", monthly: 79, yearly: 758, features: ["SSO & SAML", "Audit logs", "Dedicated manager"] },
]} />
</div>
)
}