Verified against v0 · 2026-07-18
Generate a production-ready pricing table component
A v0 component brief for a typed, responsive pricing table built on Next.js and shadcn/ui — props contract, breakpoints, and accessibility spelled out so the output drops straight into an existing codebase.
The prompt
Ready to copy — highlighted parts are example details you can swap.
Generate a PricingTable React component for a Next.js App Router project using shadcn/ui and Tailwind CSS. Props and data shape: accept a plans array as props. Each plan has name, price (monthly number), priceAnnual (annual number), description, features (a string array), ctaLabel, and highlighted (boolean, marks the recommended plan). Define this with a TypeScript interface — no inline any. Layout: - 3 plans in a responsive grid: side-by-side columns on desktop, stacked on mobile. - A monthly/annual toggle above the grid that swaps the displayed price and shows a badge reading Save 20% when annual is selected. - The highlighted plan gets a border or shadow treatment and a small ribbon reading Most popular — make it visually a size class above the others, not just a different background color. - Each card lists features with a check icon per line, and greys out or strikes through any feature the plan doesn't include when a feature is passed with included set to false. Constraints: - Client component only where needed (the toggle) — keep the static plan cards server-renderable where the toggle state allows it. - Fully keyboard-accessible toggle with a visible focus state. - No hardcoded plan data inside the component itself — it must accept plans as a prop so it's reusable, and include one example usage with 3 realistic sample plans.
Customize the highlighted detailsoptional — the prompt above already works
Why this works
v0 is tuned to produce idiomatic Next.js and shadcn/ui components, not full applications with their own data layer — that's its real strength relative to Lovable or Bolt.new, and the prompt should lean into it rather than fight it. Specifying the exact prop shape, TypeScript types, and breakpoints up front is what makes the output a genuinely reusable component you can drop into an existing design system; a bare "make a pricing table" prompt gets plausible-looking output with the plan data hardcoded inside the component and no type safety, which means rewriting it before it's usable anyway.
What you get back
A PricingTable.tsx file with a typed Plan interface, a working monthly/annual toggle, and three example cards rendered from a sample plans array passed in as props — ready to paste into an existing pricing page route.
Verified against
v0 v0 by Vercel (Next.js + shadcn/ui default stack) · 2026-07-18
Changelog
- 2026-07-18 — Initial version, added an explicit TypeScript prop contract after an untyped draft produced a component with the sample data baked in instead of passed as props.
Need this built into your business?
If a prompt isn't enough — custom software, built and maintained for you — that's Scult's day job.
EXPLORE CUSTOM SOFTWARE
