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
Starter
Get started with essential features for small projects.
Free/ month
Pro
Advanced tools for growing businesses and teams.
$19/ month
Enterprise
Custom solutions for enterprise-grade applications.
Contact Us
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
Prop
Type
Default
Description
className
string
-
Additional CSS classes
plans
Plan[]
See below
Array 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: