Features
Single-card pricing showcase with feature highlights
Animated entrance with progressive reveal of features
Responsive design that adapts to mobile and desktop
Organized features and perks categories
Installation
Run the following command:
Update your imports:import { PricingTwo } from "@/components/blocks/pricing-two"
import { PricingTwo } from "@/components/blocks/pricing-two"Usage
import { PricingTwo } from "@/components/blocks/pricing-two";
export default function Home() {
return (
<PricingTwo />
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | - | Additional CSS classes |
| price | string | "$99" | Price display |
| originalPrice | string | "$199" | Original price (shown striked) |
| title | string | "Ultimate Plan" | Plan title |
| description | string | - | Short plan description |
| features | string[] | See below | Array of features |
| perks | string[] | See below | Array of perks |
| ctaLabel | string | "Get Started" | Call-to-action button text |
Customization
You can customize the pricing block by passing props:
<PricingTwo
title="Pro Plan"
price="$49"
originalPrice="$99"
description="Everything you need to grow your business"
features={[
"Custom Domain",
"Advanced Analytics",
"API Access",
"Team Collaboration"
]}
perks={[
"Priority Support",
"Dedicated Account Manager",
"Training Sessions",
"Custom Integrations"
]}
ctaLabel="Subscribe Now"
/>