Components
Pricing Section This is a responsive and animated pricing section component. It uses framer-motion for smooth, staggered animations and is built with shadcn/ui components like Card, Button, and Badge for a consistent look and feel. The component is highly reusable, with all content and features managed through props.
Loading preview...
import { PricingCard } from "@/components/ui/pricing-section"; // Adjust the import path
const pricingPlans = [
{
planName: "Starter",
description: "Perfect for solopreneurs.",
price: 6,
priceFrequency: "per month, billed yearly",
features: [
"Unlimited blocks",
"Unlimited file uploads",
"Slack integration",
"7 day page history",
],
buttonText: "Get started",
imageSrc: "https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-m1zsJPdG8gluBoQ6Sj7VPAsI1uWAqE.png&w=1000&q=75",
popular: false,
},
{
planName: "Team",
description: "Best for high-growth teams.",
price: 20,
priceFrequency: "per user/month, billed yearly",
features: [
"Everything in Starter, plus",
"AI tools",
"Private teamspaces",
"Unlimited apps",
"30 day page history",
],
buttonText: "Get started",
imageSrc: "https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-xa53bct38evL95XiWv4u5NKIfD6l4O.png&w=1000&q=75",
popular: true,
},
];
export default function PricingDemo() {
return (
<div className="flex min-h-screen w-full items-center justify-center bg-background p-4">
<div className="grid max-w-4xl grid-cols-1 gap-8 md:grid-cols-2">
{pricingPlans.map((plan) => (
<PricingCard key={plan.planName} {...plan} />
))}
</div>
</div>
);
}