Plan Selector

Pricing

About

Plan picker for billing settings: monthly/yearly toggle with computed savings, keyboard-navigable radio cards, current plan marker and a pending confirm button.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Plan Selector to your project and fits it to your theme.

Code

How Plan Selector is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

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>
  )
}