Components
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.
Loading preview...
"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 }