About
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
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Pricing Card to your project and fits it to your theme.
Code
How Pricing Card is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
"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")}
/>
);
}Dependencies
More by Bankk roll
View all
Animated Testimonials
1.1K
Commerce Hero
650
Acme Hero
437
Myna Hero
383
Single Pricing Card
305
File Viewer
175
Code Editor Sheet
142
Auth Form
90
More in Pricing
View all
Pricing Section
582
Pricing Cards
31
Pricing Card
535
Pricing Section
173
pricing section
158
Single Pricing Card
795
Pricing
125
Glowing Pricing Tiers
45
