Billing Upgrade Prompt

Pricing 7

About

A plan upgrade prompt that highlights recommended plan pricing, savings and feature benefits with banner and card layouts.

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

Code

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

Usage.tsx

import BillingUpgradePrompt from "@/components/ui/billing-upgrade-prompt";
import { BarChart3, ShieldCheck, Users, Zap } from "lucide-react";

export default function Default() {
  return (
    <div className="flex min-h-[520px] w-full items-center justify-center bg-background p-6 text-foreground">
      <div className="w-full max-w-md">
        <BillingUpgradePrompt
          currentPlan={{ id: "free", name: "Free" }}
          recommendedPlan={{
            id: "pro",
            name: "Pro",
            price: 20,
            billingPeriod: "monthly",
          }}
          reason="usage_limit"
          limitedTime
          showSavings
          savingsAmount={40}
          features={[
            {
              name: "Unlimited projects",
              description: "Create as many projects as you need",
              icon: Zap,
            },
            {
              name: "Advanced analytics",
              description: "Track performance with detailed insights",
              icon: BarChart3,
            },
            {
              name: "Team collaboration",
              description: "Invite up to 10 team members",
              icon: Users,
            },
            {
              name: "Priority support",
              description: "Get help within 24 hours",
              icon: ShieldCheck,
            },
          ]}
          onUpgrade={() => {}}
          onDismiss={() => {}}
          onLearnMore={() => {}}
        />
      </div>
    </div>
  );
}