Pricing Card

Pricing 30

About

A modern, responsive pricing card component for displaying subscription plans. Supports discounts, feature lists, multiple variants, and dark/light modes. Built with customization and accessibility in mind.

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

"use client"

import { PricingCard } from "@/components/ui/pricing-card"

function DefaultPricingDemo() {
  const basicPlan = {
    heading: "Basic Plan",
    description: "Perfect for starters",
    price: 29,
    buttonText: "Get Started",
    list: [
      "Up to 5 projects",
      "Basic analytics",
      "24/7 support",
    ],
  }

  return (
    <div className="flex justify-center p-4">
      <PricingCard {...basicPlan} />
    </div>
  )
}

function DiscountPricingDemo() {
  const proPlan = {
    heading: "Pro Plan",
    description: "For growing businesses",
    price: 99,
    discount: 20,
    buttonText: "Upgrade Now",
    listHeading: "Everything in Basic, plus:",
    list: [
      "Unlimited projects",
      "Advanced analytics",
      "Priority support",
      "Custom integrations",
    ],
  }

  return (
    <div className="flex justify-center p-4">
      <PricingCard {...proPlan} variant="outline" />
    </div>
  )
}

export { DefaultPricingDemo, DiscountPricingDemo }