Command Palette

Search for a command to run...

Docs
Pricing Three

Pricing Three

A pricing section for your website.

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

PropTypeDefaultDescription
classNamestring-Additional CSS classes
plansPlan[]See belowArray of pricing plans to display
headerTitlestring"Simple, Transparent Pricing"Main heading
headerDescriptionstring-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"
/>