Components
Loading preview...
A modern, animated pricing card component with features and perks sections. Features: • Smooth animations on scroll • Responsive layout • Customizable content • Feature/perk lists with icons • Original price display (optional) • Custom button action Props: • title: string • description: string • price: number • originalPrice?: number • features: PricingFeature[] • buttonText?: string • onButtonClick?: () => void
npx shadcn@latest add https://21st.dev/r/bankkroll/pricing-card"use client";
import { PricingCard } from "@/components/blocks/pricing-card";
export function PricingCardBasic() {
return (
<PricingCard
title="Ultimate Plan"
description="Access everything you need to grow your business."
price={99}
originalPrice={199}
features={[
{
title: "Features",
items: [
"Unlimited Projects",
"Advanced Analytics",
"Team Collaboration",
"Custom Branding",
],
},
{
title: "Perks",
items: [
"24/7 Support",
"Priority Assistance",
"Exclusive Webinars",
"Early Feature Access",
],
},
]}
buttonText="Get Started"
onButtonClick={() => console.log("Button clicked")}
/>
);
}