Choose the plan that's right for you and start optimizing your workflow today.
Basic
$9/month
All the basics for starting a new business
5 products
Basic analytics
48-hour support response time
Advanced analytics
Custom reporting
Pro
$29/month
Everything you need for a growing business
25 products
Advanced analytics
24-hour support response time
Custom reporting
API access
Enterprise
Custom
Advanced features for scaling your business
Unlimited products
Advanced analytics
1-hour support response time
Custom reporting
API access
Features
Three-card layout with highlighted middle plan
Clear feature comparison with checkmarks and x-marks
Responsive design that stacks on mobile
Animated entrance with staggered card reveals
Installation
Run the following command:
Update your imports:
import { PricingThree } from "@/components/blocks/pricing-three"
Usage
import { PricingThree } from "@/components/blocks/pricing-three";export default function Home() { return ( <PricingThree /> );}
Props
Prop
Type
Default
Description
className
string
-
Additional CSS classes
plans
Plan[]
See below
Array of pricing plans to display
headerTitle
string
"Simple, Transparent Pricing"
Main heading
headerDescription
string
-
Subheading for the pricing section
Plan Type
interface Plan { name: string; // Plan name (e.g., "Basic", "Pro") price: string; // Price display (e.g., "$9", "Custom") description: string; // Short plan description features: Feature[]; // Features included in this plan ctaLabel: string; // Call-to-action button text isPrimary: boolean; // Whether to highlight this plan}interface Feature { name: string; // Feature name included: boolean; // Whether feature is included in plan}
Customization
You can customize the pricing section by modifying the plans array:
const customPlans = [ { name: "Starter", price: "$5", description: "Perfect for individuals", features: [ { name: "3 projects", included: true }, { name: "Basic analytics", included: true }, { name: "Priority support", included: false }, // Add more features as needed ], ctaLabel: "Start Free Trial", isPrimary: false }, // Add more plans...];<PricingThree plans={customPlans} headerTitle="Choose Your Plan" headerDescription="Find the perfect plan for your needs"/>