Pricing Plan Card With Toggle

Pricing

About

A responsive, animated pricing tier card that dynamically displays monthly or quarterly billing info, a feature list, and a primary CTA. It supports theme variants (primary, secondary, etc.) and highlights featured plans with enhanced styling.

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

Code

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

Usage.tsx

import { TierPlan } from "@/components/ui/saas-pricing-plan-card";

const demoPlan = {
  plan_name: "Hyper-Growth",
  isFeatured: true, // true or false
  color_variant: "accent", // primary, highlight
  description: "Designed for fast-growth PLG SaaS. UX onboarding Teardown & Roadmap.",
  price: {
    month: 24,
    quarter: 54,
  },
  priceId: {
    monthly: "price_123_month", //from stripe
    quarterly: "price_123_quarter", //from stripe
  },
  quarter_save: "€18",
  features: [
    { name: "What's included:" },
    { name: "Advisory + Lo-Fi Designs" },
    { name: "2 A/B Tests per Month" },
    { name: "2 Week Strategy Sprint" },
    { name: "4 UX Onboarding Teardowns" },
  ],
};

export default function DemoOne() {
  return (
    <main className="min-h-screen w-full flex flex-col items-center justify-center bg-gray-50 p-6">
      <TierPlan plan={demoPlan} />
    </main>
  );
}