Pricing

Overview

The Pricing section reads plans directly from config.ts. No need to edit the component itself - just update your config.

Usage

import { Pricing } from '@/components/landing/Pricing'

export default function Page() {
  return <Pricing />
}

A standalone /pricing page is also available that includes the FAQ section below the pricing cards.

Customization

Edit Plans

All plans are defined in config.ts:

billing: {
  plans: [
    {
      name: 'Starter',
      description: 'Perfect for side projects',
      price: { monthly: 9, yearly: 90 },
      priceAnchor: { monthly: 19, yearly: 190 },
      priceId: {
        monthly: 'price_xxx',
        yearly: 'price_xxx',
      },
      features: ['1 project', '1,000 API calls/month'],
    },
  ],
}

Anchor Pricing

Set priceAnchor to show a crossed-out "original" price next to the real price. Remove it to show only the actual price.

Featured Plan

Add isFeatured: true to a plan to highlight it with a border and "Most Popular" badge.

Billing Toggle

The monthly/yearly toggle is built-in. Yearly prices show a "Save 20%" label automatically.