Command Palette

Search for a command to run...

Docs
Pricing One

Pricing One

A pricing section for your website.

Launch Your Product

No credit card required

Launch smarter, faster, and better with pre-integrated tools like Supabase, Stripe, Resend, and Framer Motion. Emerald empowers your SaaS journey with a modern, scalable architecture.

Starter

Get started with essential features for small projects.

Free/ month

Features:

  • Supabase Integration
  • Stripe Checkout
  • Custom Email Templates
  • 24/7 Support

Pro

Advanced tools for growing businesses and teams.

$19/ month

Features:

  • Supabase Integration
  • Stripe Checkout
  • Custom Email Templates
  • 24/7 Support

Enterprise

Custom solutions for enterprise-grade applications.

Contact Us

Features:

  • Supabase Integration
  • Stripe Checkout
  • Custom Email Templates
  • 24/7 Support

Features

Responsive layout for mobile and desktop views
Three-tier pricing with custom feature comparison
Animated entrance with Motion One animations
Support for feature availability indicators

Installation

Run the following command:

Update your imports:
import { PricingOne } from "@/components/blocks/pricing-one"

Usage

import { PricingOne } from "@/components/blocks/pricing-one";
 
export default function Home() {
  return (
    <PricingOne />
  );
}

Props

PropTypeDefaultDescription
classNamestring-Additional CSS classes
plansPlan[]See belowArray of pricing plans to display

Plan Type

interface Plan {
  name: string;         // Plan name (e.g., "Starter", "Pro")
  price: string;        // Price display (e.g., "Free", "$19")
  description: string;  // Short plan description
  features: Feature[];  // Features included in this plan
  isPrimary: boolean;   // Whether to highlight this plan
  ctaLabel: string;     // Call-to-action button text
  ctaLink: string;      // Call-to-action link URL
}
 
interface Feature {
  name: string;         // Feature name
  tiers: (boolean | string)[]; // Availability in each plan
}

Customization

You can customize the pricing block by modifying the plans array:
const plans: Plan[] = [
  {
    name: "Custom Plan",
    price: "$29",
    description: "Your custom description here.",
    features: [
      { name: "Feature One", tiers: [true, true, true] },
      { name: "Feature Two", tiers: [false, true, true] },
      // Add more features...
    ],
    isPrimary: true,
    ctaLabel: "Sign Up",
    ctaLink: "/signup",
  },
  // Add more plans...
];