Skip to main content
Pricing component preview

​
Setup Plans

All pricing comes from /config.ts:
/config.ts
export const config = {
  stripe: {
    plans: [
      {
        name: "Starter",
        description: "Perfect for getting started",
        price: 49,
        priceAnchor: 99, // Optional - shows strikethrough price
        priceId: "price_xxx", // Your Stripe price ID
        isFeatured: false,
        features: [
          { text: "Lifetime access" },
          { text: "All features included" },
          { text: "Email support" },
          { text: "Priority support", isAvailable: false }, // Crossed out
        ],
      },
      {
        name: "Pro",
        description: "For serious builders",
        price: 99,
        priceId: "price_yyy",
        isFeatured: true, // Shows "Popular" badge
        features: [
          { text: "Everything in Starter" },
          { text: "Priority support" },
          { text: "Custom integrations" },
        ],
      },
    ],
  },
}

​
Change Section Heading

Open /components/Pricing.tsx: 
<h2>Simple Pricing</h2>
<p>Choose the plan that fits your needs.</p>

​
Mark Unavailable Features

Use isAvailable: false to show crossed-out features: 
features: [
  { text: "Basic features" },
  { text: "Advanced features", isAvailable: false }, // Shows with X icon
]
Keep it simple. Show 1-3 plans max. More options = harder decisions.
Mark your best plan with isFeatured: true to guide buyers.
Get your Stripe price IDs from your Stripe Dashboard