Components
Starting preview...
A dynamic pricing section with animated cards, confetti effects, and monthly/yearly toggle. Features: • Animated pricing cards using Framer Motion • Interactive monthly/yearly pricing toggle with a confetti effect • Responsive design using a mobile-first approach • Dynamic price updates with NumberFlow animations • Industry-specific content customization • Popular plan highlighting • Dark mode compatibility
npx shadcn@latest add https://21st.dev/r/Codehagen/pricing"use client";
import { Pricing } from "@/components/blocks/pricing";
const demoPlans = [
{
name: "STARTER",
price: "50",
yearlyPrice: "40",
period: "per 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: "/sign-up",
isPopular: false,
},
{
name: "PROFESSIONAL",
price: "99",
yearlyPrice: "79",
period: "per month",
features: [
"Unlimited projects",
"Advanced analytics",
"24-hour support response time",
"Full API access",
"Priority support",
"Team collaboration",
"Custom integrations",
],
description: "Ideal for growing teams and businesses",
buttonText: "Get Started",
href: "/sign-up",
isPopular: true,
},
{
name: "ENTERPRISE",
price: "299",
yearlyPrice: "239",
period: "per month",
features: [
"Everything in Professional",
"Custom solutions",
"Dedicated account manager",
"1-hour support response time",
"SSO Authentication",
"Advanced security",
"Custom contracts",
"SLA agreement",
],
description: "For large organizations with specific needs",
buttonText: "Contact Sales",
href: "/contact",
isPopular: false,
},
];
function PricingBasic() {
return (
<div className="h-[800px] overflow-y-auto rounded-lg">
<Pricing
plans={demoPlans}
title="Simple, Transparent Pricing"
description="Choose the plan that works for you\nAll plans include access to our platform, lead generation tools, and dedicated support."
/>
</div>
);
}
export { PricingBasic };