Components
Loading preview...
A responsive, theme-adaptive pricing section with an interactive starfield background and a toggle for monthly/annual plans. Animated pricing cards with Framer Motion Interactive monthly/yearly pricing toggle with confetti effect Responsive design with mobile-first approach Dynamic price updates with NumberFlow animations Popular plan highlighting Dark mode compatible
@ravikatiyar
npx shadcn@latest add https://21st.dev/r/ravikatiyar162/pricingimport { PricingSection } from "@/components/ui/pricing";
// Demo data for the pricing plans
const demoPlans = [
{
name: "Starter",
price: "50",
yearlyPrice: "40",
period: "month",
features: [
"Up to 10 projects",
"Basic analytics",
"48-hour support response time",
"Limited API access",
"Community support",
],
description: "Perfect for individuals and small projects.",
buttonText: "Start Free Trial",
href: "#",
},
{
name: "Professional",
price: "99",
yearlyPrice: "79",
period: "month",
features: [
"Unlimited projects",
"Advanced analytics",
"24-hour support response time",
"Full API access",
"Priority support & Team collaboration",
],
description: "Ideal for growing teams and businesses.",
buttonText: "Get Started",
href: "#",
isPopular: true,
},
{
name: "Enterprise",
price: "299",
yearlyPrice: "239",
period: "month",
features: [
"Everything in Professional",
"Custom solutions & integrations",
"Dedicated account manager",
"SSO Authentication & Advanced security",
],
description: "For large organizations with specific needs.",
buttonText: "Contact Sales",
href: "#",
},
];
// Demo component to showcase the PricingSection
export default function PricingSectionDemo() {
return (
<PricingSection
plans={demoPlans}
title="Find the Perfect Plan"
description="Select the ideal package for your needs and start building today."
/>
);
}