Components
Loading preview...
Pricing Plan Selection UI that helps users compare subscription tiers. It presents two options — Basic for individuals and small teams with limited features, and Pro for growing teams with advanced tools. Each plan shows price, features, and a user slider that adjusts cost per user, making pricing transparent. The design highlights the Pro plan with a “Popular” tag and a bold CTA button, guiding users toward the upgrade. It’s ideal for SaaS apps offering tiered subscriptions.
@lavikatiyar
npx shadcn@latest add https://21st.dev/r/lavikatiyar/pricingimport { InteractivePricingCard } from '@/components/ui/pricing'; // Adjust path as needed
export default function InteractivePricingCardDemo() {
const proPlanFeatures = [
'Unlimited Projects',
'Team Collaboration',
'Priority Support',
'Advanced Analytics',
'10GB Storage',
];
const basicPlanFeatures = [
'5 Projects',
'Basic Collaboration',
'Email Support',
'Basic Analytics',
'2GB Storage',
];
return (
<div className="flex min-h-screen w-full flex-col items-center justify-center gap-8 bg-background p-4 md:flex-row">
{/* Standard Plan */}
<InteractivePricingCard
planName="Basic"
planDescription="For individuals and small teams starting out."
pricePerUnit={10}
unitName="user"
minUnits={1}
maxUnits={10}
initialUnits={3}
features={basicPlanFeatures}
ctaText="Get Started with Basic"
/>
{/* Highlighted Plan */}
<InteractivePricingCard
planName="Pro"
planDescription="For growing teams that need collaboration and power."
pricePerUnit={15}
unitName="user"
minUnits={5}
maxUnits={25}
initialUnits={10}
features={proPlanFeatures}
ctaText="Subscribe to Pro"
highlighted={true} // This prop makes the card stand out
/>
</div>
);
}