Pricing Three

Pricing

Simple, Transparent Pricing

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"
/>