Skip to Content
ClientComponentsPricing Component

Pricing Component

Display pricing tiers with Stripe integration for seamless checkout.

Location

src/components/Pricing/Pricing.tsx

Usage

app/page.tsx
import Pricing from '@/components/Pricing/Pricing'
 
export default function Home() {
  return <Pricing />
}

Configuration

Pricing Tiers

Define your pricing tiers in the pricingItems array:

Pricing.tsx
const pricingItems: PricingItem[] = [
  {
    title: 'Pro',
    price: 169,
    priceBefore: 219,
    description: 'For medium teams',
    features: [
      { name: 'Boilerplate project', included: true },
      { name: 'SEO', included: true },
      { name: 'Resend emails', included: true },
      { name: 'Stripe payments', included: true },
      { name: 'MongoDB', included: true },
      { name: 'Google Oauth', included: true },
      { name: 'Components', included: true },
      { name: 'ChatGPT prompts for terms & privacy', included: true },
      {
        name: 'Lifetime updates',
        included: true,
        label: 'Updated 1st Feb 2025',
        labelUrl: '/updates',
      },
    ],
    popular: true,
    productType: ProductType.PRO,
  },
]

Adding a New Tier

{
  title: 'Enterprise',
  price: 299,
  priceBefore: 399,
  description: 'For large teams',
  features: [
    { name: 'Everything in Pro', included: true },
    { name: 'Priority support', included: true },
    { name: 'Custom integrations', included: true },
    { name: 'Dedicated account manager', included: true },
  ],
  popular: false,
  productType: ProductType.ENTERPRISE,  // Add to config.ts enum
}

Feature Options

Each feature can have:

  • name - Feature name (required)
  • included - Whether it’s included (required)
  • label - Optional badge text
  • labelUrl - Optional link for the badge
{
  name: 'Lifetime updates',
  included: true,
  label: 'New!',
  labelUrl: '/updates'
}

Customizable Variables

Pricing.tsx
// Popular badge text
const popularText = 'POPULAR'
 
// Currency
const currency = 'USD'
 
// Introduction text
const intro = 'Streamline your development, accelerate your launch, and boost your earnings!'

Stripe Integration

The Pricing component integrates with Stripe through the CTAButton component:

  1. User clicks “Get Started” button
  2. CTAButton redirects to Stripe Checkout
  3. Uses productType to get the correct Stripe price ID from config
  4. After payment, redirects to success page

Make sure your Stripe price IDs are configured in /config/config.ts for each ProductType.

Styling

Section Background

<section className="py-20 bg-neutral" id="pricing">

Change bg-neutral to any DaisyUI color:

  • bg-base-100 - Default background
  • bg-base-200 - Slightly darker
  • bg-primary - Primary color
  • bg-secondary - Secondary color

Card Styling

Popular cards have a border:

className={`... ${item.popular ? 'border-2 border-primary' : 'border-0'}`}

Price Display

Shows strikethrough for original price:

<span className="absolute bg-base-content h-[1.5px] inset-x-0 top-[48%]"></span>

Complete Example

Pricing.tsx
const pricingItems: PricingItem[] = [
  {
    title: 'Starter',
    price: 49,
    priceBefore: 99,
    description: 'Perfect for side projects',
    features: [
      { name: 'Full source code', included: true },
      { name: 'Basic support', included: true },
      { name: 'Updates for 1 year', included: true },
      { name: 'Priority support', included: false },
      { name: 'Custom features', included: false },
    ],
    popular: false,
    productType: ProductType.BASIC,
  },
  {
    title: 'Professional',
    price: 149,
    priceBefore: 249,
    description: 'For serious builders',
    features: [
      { name: 'Full source code', included: true },
      { name: 'Priority support', included: true },
      { name: 'Lifetime updates', included: true, label: 'Best Value' },
      { name: 'Custom features', included: true },
      { name: 'White-label license', included: true },
    ],
    popular: true,
    productType: ProductType.PRO,
  },
]
 
const popularText = 'BEST VALUE'
const currency = 'USD'
const intro = 'Choose the perfect plan for your needs'

Best Practices

Pricing Strategy

  • Show 2-3 tiers maximum
  • Mark one as “popular” to guide decision
  • Show original price for social proof
  • Use round numbers ($99, $149, $199)

Features

  • List 5-8 features per tier
  • Put most important features first
  • Use checkmarks for included, X for not included
  • Be specific about what’s included

Call-to-Action

  • Use action-oriented button text
  • Make popular tier stand out visually
  • Add urgency if appropriate (“Limited time offer”)

Responsive Design

  • Mobile: Single column, cards stack vertically
  • Tablet: Same as mobile
  • Desktop: Cards side-by-side

Next Steps

Last updated on
Components OverviewConfiguration