Components
Loading preview...
Pricing Card Component
npx shadcn@latest add https://21st.dev/r/erikvalencia1/pricing-card-component// demo.tsx
import { Component } from "@/components/ui/pricing-card-component";
export default function DemoPricing() {
return (
<Component
plans={[
{
name: "Starter",
price: "19",
yearlyPrice: "15",
period: "month",
features: ["Basic analytics", "100 leads", "Email support"],
description: "Great for small teams getting started.",
buttonText: "Get Started",
href: "#",
isPopular: false,
},
{
name: "Pro",
price: "49",
yearlyPrice: "39",
period: "month",
features: ["Advanced analytics", "1000 leads", "Priority support"],
description: "Perfect for growing businesses.",
buttonText: "Upgrade",
href: "#",
isPopular: true,
},
{
name: "Enterprise",
price: "99",
yearlyPrice: "79",
period: "month",
features: ["Unlimited leads", "Dedicated account manager"],
description: "Best for large organizations.",
buttonText: "Contact Sales",
href: "#",
isPopular: false,
},
]}
/>
);
}