Billing Plan Selector

Pricing 1

About

A subscription plan selector with a monthly/annual billing toggle, feature lists, popular/current badges, and per-plan select buttons.

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

Code

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

Usage.tsx

"use client";

import * as React from "react";
import BillingPlanSelector from "@/components/ui/billing-plan-selector";

const plans = [
  {
    id: "starter",
    name: "Starter",
    description: "For individuals getting started",
    price: { monthly: 9, annual: 86 },
    features: [
      { name: "Projects", limit: 3 },
      { name: "Team members", limit: 1 },
      { name: "Community support" },
      { name: "Advanced analytics", included: false },
    ],
  },
  {
    id: "pro",
    name: "Pro",
    description: "For growing teams and businesses",
    price: { monthly: 29, annual: 278 },
    isPopular: true,
    ctaLabel: "Upgrade to Pro",
    features: [
      { name: "Projects", limit: "Unlimited" },
      { name: "Team members", limit: 10 },
      { name: "Priority support" },
      { name: "Advanced analytics" },
    ],
  },
  {
    id: "enterprise",
    name: "Enterprise",
    description: "For large organizations",
    price: { monthly: 99, annual: 950 },
    isCurrent: true,
    features: [
      { name: "Projects", limit: "Unlimited" },
      { name: "Team members", limit: "Unlimited" },
      { name: "Dedicated support" },
      { name: "SSO & audit logs" },
    ],
  },
];

export default function Default() {
  const [billingPeriod, setBillingPeriod] = React.useState<
    "monthly" | "annual"
  >("monthly");
  const [selectedPlanId, setSelectedPlanId] = React.useState<
    string | undefined
  >("pro");

  return (
    <div className="flex min-h-full w-full items-center justify-center bg-background p-6 text-foreground sm:p-10">
      <div className="w-full max-w-5xl">
        <BillingPlanSelector
          plans={plans}
          selectedPlanId={selectedPlanId}
          billingPeriod={billingPeriod}
          onBillingPeriodChange={setBillingPeriod}
          onPlanSelect={setSelectedPlanId}
        />
      </div>
    </div>
  );
}