v0 prompt to build a pricing page
A pricing page lives or dies on the details this prompt pins down: a single plans array as the source of truth, a billing toggle that updates prices and checkout params together, and a comparison table that scrolls on phones. v0 renders it as three shadcn/ui Cards you can restyle in follow-up messages.
Last updated
Build a pricing page at /pricing with three tiers, Free, Pro, and Team, rendered from a single plans array in lib/plans.ts so copy edits never touch markup. Layout: three shadcn/ui Cards on desktop, stacked below the md breakpoint, the Pro card visually raised with a subtle ring and a Most popular Badge. Billing toggle: a monthly and annual Tabs control above the cards that swaps displayed prices from the plans array, annual showing the per-month equivalent with a small billed yearly note, and the selected term carried into every checkout link as a query param. Feature lists: check icons from lucide-react for included items, dimmed x icons for excluded ones so tiers compare at a glance, and a full comparison table further down inside an overflow-x auto wrapper so it scrolls on phones instead of breaking layout. Each tier gets a distinct CTA: Free links to signup, Pro links to a {{addon}} checkout route carrying plan and term params, Team opens a contact Dialog with a short form that validates email format inline. Edge cases: prices render from numbers through one currency formatter, never hardcoded strings, the toggle keeps keyboard focus when switching terms, and the comparison table repeats the tier CTAs in its footer row. Below the table, an Accordion with five billing questions, one open at a time. The contact Dialog needs a submitting state and a success message that replaces the form. Acceptance: toggling terms updates all three prices in the v0 preview and both paid CTAs carry the correct plan and term params.Customize it
Runs in your browser. Nothing you type here is sent anywhere.
Build a pricing page at /pricing with three tiers, Free, Pro, and Team, rendered from a single plans array in lib/plans.ts so copy edits never touch markup. Layout: three shadcn/ui Cards on desktop, stacked below the md breakpoint, the Pro card visually raised with a subtle ring and a Most popular Badge. Billing toggle: a monthly and annual Tabs control above the cards that swaps displayed prices from the plans array, annual showing the per-month equivalent with a small billed yearly note, and the selected term carried into every checkout link as a query param. Feature lists: check icons from lucide-react for included items, dimmed x icons for excluded ones so tiers compare at a glance, and a full comparison table further down inside an overflow-x auto wrapper so it scrolls on phones instead of breaking layout. Each tier gets a distinct CTA: Free links to signup, Pro links to a input validation checkout route carrying plan and term params, Team opens a contact Dialog with a short form that validates email format inline. Edge cases: prices render from numbers through one currency formatter, never hardcoded strings, the toggle keeps keyboard focus when switching terms, and the comparison table repeats the tier CTAs in its footer row. Below the table, an Accordion with five billing questions, one open at a time. The contact Dialog needs a submitting state and a success message that replaces the form. Acceptance: toggling terms updates all three prices in the v0 preview and both paid CTAs carry the correct plan and term params.
Same task in other tools
Questions about this prompt
Where do I change prices and feature copy after generation?
Everything renders from the plans array in lib/plans.ts, so edit that file directly in the v0 code panel. Because the markup maps over the array, no regeneration is needed and the toggle, cards, and comparison table all update together.
How do I connect the CTAs to a real checkout?
The plan and term query params are the contract. Point the Pro href at the server route that creates your {{addon}} checkout session and read both params there to pick the right price. The Team Dialog just needs its form action pointed at your contact handler.
The annual toggle shows the wrong math on one tier. How do I fix it?
That happens when v0 hardcodes a display string instead of deriving it. Keep only the monthly and annual amounts as numbers in the array and compute every displayed price through the one formatter, then ask v0 to remove any literal price strings it left in the markup.