Prompt to Build a SaaS Pricing Page in Next.js

Copy-paste AI prompt to build a SaaS pricing page in Next.js with Tailwind, toggle billing, and Stripe-ready plan data.

Use this prompt to generate a polished, conversion-optimized pricing page with a monthly/annual billing toggle, a highlighted “Most Popular” tier, and a typed plan config that wires directly into Stripe Checkout — no placeholder data.

Main Prompt

You are working in a Next.js App Router project using TypeScript and Tailwind CSS v4.

Task: create a `/pricing` page with the following specification.

Plan data:
- Starter: $0/mo, $0/yr — 1 user, 5 projects, community support.
- Pro: $19/mo, $190/yr — 5 users, unlimited projects, email support. Mark as "Most Popular".
- Enterprise: $99/mo, $990/yr — unlimited users, SSO, dedicated support.

UI requirements:
- A client component `<PricingToggle>` with monthly/annual switch; annual shows "Save 17%".
- A `<PricingCard>` component per plan with: name, price, feature list, CTA button.
- "Most Popular" card has a highlighted border and badge.
- CTA buttons call `handleCheckout(planId, interval)` — stub it for now, we will wire Stripe later.
- The page file itself must be a Server Component; only the toggle and cards are Client Components.
- Use Tailwind utility classes only — no CSS modules, no inline styles.

Type requirements:
- Export a `Plan` interface from `src/lib/pricing.ts`.
- Plan data lives in that same file as a `const PLANS: Plan[]`.

Do NOT install any new packages. Stop and list all files before writing code.

Implementation Notes

The page must be a Server Component so it is statically renderable; lift 'use client' only to the toggle and card components that need useState.
handleCheckout should accept (planId: string, interval: 'monthly' | 'annual') — this signature matches the Stripe Checkout prompt, so keep it stable.
Tailwind v4 uses CSS-first config; avoid tailwind.config.ts unless it already exists.

Expected File Changes

src/app/pricing/page.tsx            (new — Server Component)
src/components/PricingToggle.tsx    (new — Client Component)
src/components/PricingCard.tsx      (new — Client Component)
src/lib/pricing.ts                  (new — Plan type + PLANS constant)

Acceptance Criteria

bun run build exits 0 with no TypeScript errors.
Toggling monthly/annual updates all three card prices without a full page reload.
“Most Popular” badge is visible on the Pro card.
handleCheckout is called with the correct planId and interval when a CTA is clicked.

Test Commands

bun run typecheck
bun run build
bun run dev
# open http://localhost:3000/pricing and verify toggle behavior

Common AI Mistakes

Marking the page file itself 'use client', which defeats server rendering.
Hard-coding prices inside JSX instead of deriving them from PLANS.
Using tailwind.config.ts theme.extend patterns that don’t apply to Tailwind v4.
Forgetting to export the Plan type, breaking the Stripe Checkout integration later.

Fix Prompt

The pricing page has type errors or the toggle doesn't work. Fix in this order:
1. Remove `'use client'` from `src/app/pricing/page.tsx` — only the child components need it.
2. Make sure `PricingToggle` uses `useState` for the billing interval and passes it down via props.
3. Confirm `handleCheckout` signature is `(planId: string, interval: 'monthly' | 'annual') => void`.
Show the corrected diff only — do not rewrite unrelated files.