Edil Ozi

Pricing Card

Install component

npxshadcn@latest add "https://21st.dev/r/Edil-ozi/pricing-card"
"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 }