Pricing Card

Pricing

About

Pricing Card This component is designed to display subscription or product tiers. It's built to be highly reusable—all content, including fees, offers, and the decorative image, is passed via props. This ensures you can use the same component for various pricing plans.

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

Code

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

Usage.tsx

import { PricingCard } from "@/components/ui/pricing-card-2"; // Adjust the import path

/**
 * A demo component to showcase the PricingCard.
 * It displays two cards with different data, demonstrating the reusability
 * and responsiveness of the component.
 */
export default function PricingCardDemo() {
  const pricingData = [
    {
      cardTitle: "NeuCard Infinity",
      joiningFeeOriginal: "₹1,499",
      joiningFeeDiscounted: "₹0",
      joiningFeeOffer: "Zero joining fee offer for limited time only",
      renewalFee: "₹1499 + GST",
      renewalFeeWaiver:
        "*Renewal Fee of Rs. 1,499 waived off on spends of Rs 3 lakh or more in the preceding year",
      decorativeImageUrl: "https://www.tataneu.com/creditcard/Right%20gradient%20strokes%201.png", // Placeholder image URL
    },
    {
      cardTitle: "NeuCard Plus",
      joiningFeeOriginal: "₹499",
      joiningFeeDiscounted: "₹0",
      joiningFeeOffer: "Zero joining fee offer for limited time only",
      renewalFee: "₹499 + GST",
      renewalFeeWaiver:
        "*Renewal Fee of Rs. 499 waived off on spends of Rs 1 lakh or more in the preceding year",
      decorativeImageUrl: "https://www.tataneu.com/creditcard/Right%20gradient%20strokes%201.png", // Placeholder image URL
    },
  ];

  return (
    <div className="flex min-h-screen w-full items-center justify-center bg-background p-4 sm:p-8">
      <div className="flex flex-col items-center gap-8 md:flex-row md:items-stretch">
        {pricingData.map((data, index) => (
          <PricingCard key={index} {...data} />
        ))}
      </div>
    </div>
  );
}