v0 by Vercel turns a natural-language prompt into production-ready Next.js, Tailwind, and shadcn/ui code — real, deployable pages, not mockups. Landing pages are where it shines, because a good marketing page is mostly layout, copy, and design tokens, all of which you can specify precisely. This pack is 24 copy-paste prompts for exactly that: hero sections, pricing tables, waitlist forms wired to a database, and full one-page sites.
Every prompt follows v0's real structure — product surface (the exact sections and data), context of use (who it's for and what it should drive), and constraints and taste (stack, tone, and concrete design tokens). Fill the [bracketed placeholders] with your product's details. For the wider set, start with the 40 Best v0 by Vercel Prompts roundup, and for reusable building blocks see v0 prompts for UI components.
Hero & above-the-fold
The hero decides whether a visitor keeps scrolling. Give v0 the exact headline intent, the primary action, and hard design tokens so the first paint looks intentional instead of generic.
1. SaaS landing page hero with token spec
Build the hero section of a SaaS landing page for [product name], a [one-line description, e.g. "scheduling tool for solo consultants"].
Used by [target buyer] who lands from a cold ad and decides in 5 seconds whether to keep reading. The section must drive one action: start a free trial.
Product surface:
- Left-aligned headline (max 8 words), a one-sentence subhead, a primary "Start free trial" button and a ghost "See how it works" button, and a small "no credit card" line under the buttons.
- Right side: a rounded product screenshot placeholder with a soft shadow.
- A thin trust line: "Trusted by 2,000+ teams".
Constraints:
- Stack: Next.js App Router, Tailwind, shadcn/ui, TypeScript.
- Tokens: background #FFFFFF, foreground #0A0A0A, primary #4F46E5, muted #6B7280; border-radius 12px; font Inter, headline weight 800, body weight 400; section padding 96px top/bottom, 24px gutters.
- Responsive: two columns on desktop, stacked and center-aligned below 768px, down to 360px.
Do not add auth or a nav dropdown yet.Why it works: naming the single action and exact tokens gives v0 no room to guess, so the first generation is close enough to ship.
2. Above-the-fold hero with logo cloud
Build an above-the-fold hero for [product], used by [buyer] who needs proof it's legit before scrolling.
Product surface:
- Centered eyebrow tag ("New in 2026"), a large headline, a subhead, and a single primary CTA "[Get started]".
- Directly below: a monochrome logo cloud of 6 customer logos with the caption "Powering teams at".
Constraints: Next.js, Tailwind, shadcn/ui. Tokens: bg #0B1120, text #E2E8F0, primary #22D3EE, radius 10px, Inter, headline 800; generous vertical rhythm (space-y-8). Logos are grayscale at 60% opacity, full color on hover. Responsive down to 360px; logo cloud wraps to 3 columns on mobile.Best for: B2B pages where social proof needs to appear before the fold.
3. Split hero with product screenshot
Build a 50/50 split hero for [product]. Left column: headline, subhead, an email input plus "[Request access]" button inline (single row on desktop). Right column: a browser-frame mockup wrapping a screenshot placeholder, tilted 2 degrees with a subtle drop shadow.
Context: used by [buyer] evaluating tools mid-workday; the page should feel fast and credible.
Constraints: Next.js App Router, Tailwind, shadcn/ui. Tokens: bg #FAFAF9, foreground #1C1917, primary #EA580C, radius 14px, Inter weights 400/600/800; container max-width 1200px. Below 900px stack columns, move the mockup under the copy, and make the email row wrap. Keep it keyboard-accessible.Why it works: the browser-frame mockup and email-inline pattern is a proven high-intent layout, and the breakpoint rule prevents the classic squished-two-column mobile bug.
4. Animated gradient hero, then Design Mode polish
Build a bold hero for [product] with an animated conic-gradient background (slow, subtle, respects prefers-reduced-motion). Centered headline, subhead, and two CTAs. Add a faint grid overlay behind the content.
Constraints: Next.js, Tailwind, shadcn/ui. Tokens: base gradient from #7C3AED to #DB2777 to #2563EB, foreground #FFFFFF, radius 16px, Inter 800 headline. Buttons: solid white primary, outline secondary. Responsive down to 360px.Best for: launch pages that need visual punch. After it generates, open Design Mode to nudge the gradient stops, headline size, and button spacing visually instead of re-prompting and burning credits.
5. Dev-tool landing hero, dark theme with code block
Build a developer-focused hero for [tool], used by engineers who want to see it work in one command.
Product surface:
- Headline, subhead, and a "Copy install" code block showing `npm i [package]` with a working copy-to-clipboard button.
- Primary CTA "Read the docs" and a GitHub star button showing "[8.2k] stars".
Constraints: Next.js, Tailwind, shadcn/ui. Tokens: bg #09090B, foreground #FAFAFA, accent #34D399, mono font for the code block, radius 8px. The code block has a dark surface #18181B with a copy button top-right. Responsive down to 360px; keep the code block scrollable, not wrapping.Why it works: developers convert on a runnable command, so leading with a real copy-install block matches the audience's decision moment. Pair it with how to prompt v0 for UI to refine the tone.
Full SaaS landing pages
For a whole page, ask v0 to plan first. A short PRD keeps the sections coherent and the tokens consistent from hero to footer.
6. Full SaaS landing page from a PRD
Before writing code, produce a short PRD for a SaaS landing page for [product], a [one-line description]. Cover: target visitor, the one conversion goal, the section order, and a design-token table (colors, radius, font weights, spacing scale).
Then build the full page in that order:
1. Sticky nav with logo, 4 links, and a "Start free" button.
2. Hero (headline, subhead, primary + ghost CTA, screenshot).
3. Logo cloud.
4. 3-across feature grid with lucide icons.
5. Two alternating feature rows (image + copy).
6. Testimonial with avatar and company.
7. 3-tier pricing.
8. FAQ accordion (6 items).
9. Final CTA band.
10. Footer with 4 link columns.
Constraints: Next.js App Router, Tailwind, shadcn/ui, TypeScript. Tokens: bg #FFFFFF, foreground #0F172A, primary #2563EB, muted #64748B, radius 12px, Inter 400/600/800, section padding 80px. Responsive down to 360px. Show me the PRD first, then build.Why it works: the PRD-first pattern locks the section order and token table before v0 writes a line, so the page reads as one design instead of eight stitched fragments.
7. Product-led SaaS page with interactive demo slot
Build a product-led SaaS landing page for [product]. Include a "Try it" section near the top with a real, interactive shadcn/ui demo of the core interaction: [describe it, e.g. "a tag input that shows a live preview of the generated slug"]. Wire it as a client component with useState — no backend.
Sections: hero, the interactive Try-it block, a 3-column benefits grid, a short "how it works" 3-step row, pricing teaser linking to /pricing, and a footer CTA.
Constraints: Next.js App Router, Tailwind, shadcn/ui, TypeScript. Tokens: bg #FCFCFC, foreground #171717, primary #059669, radius 10px, Inter. Responsive down to 360px. Keep the demo self-contained and accessible.Best for: tools whose value is obvious the moment someone touches them — let the page prove it live.
Pricing & CTA sections
Pricing and closing CTAs are where money is made or lost. Be exact about tiers, the recommended plan, and the single action each block should drive.
8. Three-tier pricing table
Build a 3-tier pricing section for [product].
Tiers:
- Starter, [$0], for [use case], features: [list 4].
- Pro, [$29/mo], for [use case], features: [list 6], marked "Most popular".
- Team, [$99/mo], for [use case], features: [list 7].
Each card: name, price, short description, feature list with check icons, and a CTA button. The Pro card is visually emphasized (primary border, subtle lift, "Most popular" badge).
Constraints: Next.js, Tailwind, shadcn/ui. Tokens: bg #FFFFFF, foreground #0A0A0A, primary #4F46E5, muted #6B7280, radius 12px, Inter 400/600/800. 3 columns on desktop, stacked below 768px with the Pro card first. Down to 360px.Why it works: spelling out which tier is "Most popular" lets v0 apply the visual hierarchy that steers buyers to the plan you want to sell.
9. Pricing with monthly/annual toggle
Add a monthly/annual billing toggle above my 3-tier pricing. When "Annual" is selected, show the discounted per-month price with the original struck through and a "Save 20%" badge on the toggle. Wire it as a client component with useState so switching updates all three cards instantly.
Constraints: Next.js, Tailwind, shadcn/ui. Use a shadcn Switch or a segmented toggle. Keep the existing tokens (primary #4F46E5, radius 12px). Ensure the toggle is keyboard-accessible and the prices animate a subtle fade on change. Responsive down to 360px.Best for: raising average contract value by making the annual discount visible at the moment of choice.
10. Final CTA band with email capture
Build a full-width final CTA band for the bottom of a landing page for [product]. Centered headline "[Ready to get started?]", one supporting line, and an inline email input + "[Start free]" button. On submit, show an inline success state ("You're in — check your inbox"); no backend yet, just client-side state and validation.
Constraints: Next.js, Tailwind, shadcn/ui. Tokens: band background primary #4F46E5, foreground #FFFFFF, input surface white, radius 12px, Inter 800 headline; vertical padding 80px. The email row is a single row on desktop, stacks below 640px. Down to 360px, keyboard-accessible.Why it works: a self-contained success state means the band works and demos well immediately; you swap in the real server action later.
11. Sticky mobile CTA bar
Add a sticky bottom CTA bar that appears only on mobile (below 768px) once the user scrolls past the hero. It shows the product name on the left and a compact "[Start free]" button on the right, with a subtle top border and a backdrop blur.
Constraints: Next.js, Tailwind, shadcn/ui. Use an IntersectionObserver (or scroll position) in a client component to toggle visibility; animate it sliding up. Tokens: surface rgba white with backdrop-blur, primary #4F46E5, radius 10px. Must not overlap the footer; hidden entirely on desktop.Best for: recovering mobile conversions where the primary CTA has scrolled out of view.
Waitlist & launch pages
Pre-launch pages need a real signup, not a fake one. These prompts wire the form to a server action and a database, then deploy.
12. Waitlist page wired to Supabase
Build a single-screen waitlist page for [product], launching [month/year]. Centered logo, headline, one-sentence subhead, and an email capture form.
Wire it for real:
- Create a Next.js server action that inserts { email, created_at } into a Supabase table called "waitlist".
- Validate the email on client and server; handle duplicate emails gracefully with a friendly "You're already on the list" message.
- On success, replace the form with a confirmation and a "position #[N]" style message.
- Add the SUPABASE_URL and SUPABASE_ANON_KEY as env vars.
Constraints: Next.js App Router, Tailwind, shadcn/ui, TypeScript. Tokens: bg #0B1120, foreground #F8FAFC, primary #6366F1, radius 12px, Inter 400/800. Center everything vertically; responsive down to 360px. Then deploy to Vercel.Why it works: asking for the table, the server action, validation, and env vars in one prompt gives you a working signup end to end — the new full-stack v0 can create all of it and deploy.
13. Coming-soon page with live countdown
Build a "coming soon" page for [product] launching on [ISO date]. Product surface: brand mark, headline, a live countdown timer (days / hours / minutes / seconds) that ticks in the browser, an email capture with a server action storing to a Supabase "waitlist" table, and 3 small social links in the footer.
Constraints: Next.js App Router, Tailwind, shadcn/ui, TypeScript. The countdown is a client component using setInterval and cleans up on unmount; it counts to the target date in the visitor's local time. Tokens: bg gradient #111827 to #1F2937, foreground #F9FAFB, accent #F59E0B, radius 12px, Inter 800. Responsive down to 360px; deploy to Vercel.Best for: building urgency before a dated launch while still collecting emails.
14. Early-access page with referral field
Build an early-access signup page for [product]. Form fields: email (required) and "How did you hear about us?" (optional select: Twitter/X, a friend, search, other).
Server action inserts { email, referral_source, created_at } into a Supabase "early_access" table. After signup, show a share card: "Move up the list — invite a friend" with a copy-able referral link [https://example.com/?ref=CODE].
Constraints: Next.js App Router, Tailwind, shadcn/ui, TypeScript. Tokens: bg #FFFFFF, foreground #18181B, primary #DB2777, radius 12px, Inter. Client + server validation; graceful duplicate handling. Responsive down to 360px; deploy to Vercel.Why it works: capturing the referral source and offering a share loop turns a passive waitlist into a growth channel from day one.
15. Beta signup with server-action validation and toast
Build a compact beta-signup card that I can drop into any landing page for [product]. Fields: name and work email. On submit, call a Next.js server action that validates with Zod, rejects free-email domains with a clear message, and inserts into a Supabase "beta_signups" table.
Show a shadcn/ui toast on success and inline field errors on failure. Keep the button in a pending/disabled state while the action runs (useFormStatus).
Constraints: Next.js App Router, Tailwind, shadcn/ui, TypeScript. Tokens: surface #FFFFFF, foreground #0A0A0A, primary #2563EB, radius 10px, Inter. Fully keyboard-accessible; responsive down to 360px.Best for: gated betas where you only want qualified work-email signups, validated server-side.
Feature, testimonial & FAQ sections
These are the mid-page blocks that carry the argument. Build them as standalone sections you can drop into any page, matched to your tokens.
16. Feature grid with icons
Build a 3-across feature grid for [product]. Six features, each: a lucide icon in a soft tinted square, a short bold title, and one sentence of body copy. Add a small section heading and subhead above the grid.
Features: [title 1 — one line], [title 2 — one line], [title 3 — one line], [title 4 — one line], [title 5 — one line], [title 6 — one line].
Constraints: Next.js, Tailwind, shadcn/ui. Tokens: bg #FFFFFF, foreground #0F172A, muted #64748B, icon tint from primary #2563EB at 10% opacity, radius 12px, Inter 600/800. 3 columns desktop, 2 tablet, 1 mobile; down to 360px.Why it works: six real one-liners in the prompt beats "add some features" — v0 fills your value props, not lorem ipsum.
17. Alternating feature rows
Build a section of 3 alternating feature rows for [product]. Each row: a screenshot placeholder on one side and copy on the other (eyebrow tag, bold heading, 2-sentence description, and a text link "[Learn more →]"). Alternate the image side row to row; on mobile the image always stacks above the copy.
Content: Row 1 [feature + benefit], Row 2 [feature + benefit], Row 3 [feature + benefit].
Constraints: Next.js, Tailwind, shadcn/ui. Tokens: bg #FAFAFA, foreground #171717, primary #7C3AED, radius 14px, Inter. Row vertical spacing 96px; responsive down to 360px.Best for: walking through 2-4 core capabilities with room to breathe.
18. Testimonial wall / social proof
Build a testimonial wall for [product]: a masonry-style grid of 6 quote cards. Each card: the quote, an avatar, a name, and a role @ company. Above the grid, a small stat row: "[4.9/5]", "[2,000+] teams", "[10M+] tasks run".
Constraints: Next.js, Tailwind, shadcn/ui. Tokens: bg #FFFFFF, card surface #F8FAFC, foreground #0F172A, radius 12px, Inter. Use CSS columns for the masonry effect; 3 columns desktop, 2 tablet, 1 mobile. Cards have a hairline border and subtle hover lift. Responsive down to 360px.Why it works: the stat row plus a dense quote wall front-loads credibility, and the masonry columns keep varied-length quotes from leaving ragged gaps.
19. Accordion FAQ section
Build an FAQ section for [product] using the shadcn/ui Accordion. Section heading "Frequently asked questions", subhead, then 6 items:
Q1 [question] / A1 [answer], Q2 [...], Q3 [...], Q4 [...], Q5 [...], Q6 [...].
Only one item open at a time; the first item open by default. Below the accordion, a small line: "Still have questions? [Contact us]" linking to /contact.
Constraints: Next.js, Tailwind, shadcn/ui. Tokens: bg #FFFFFF, foreground #0A0A0A, muted #6B7280, radius 10px, Inter 600/400; max-width 768px, centered. Keyboard-accessible; responsive down to 360px.Best for: handling objections in-page and adding FAQ schema-friendly structure to the marketing route.
20. Comparison table vs competitors
Build a comparison section that positions [product] against [competitor A] and [competitor B]. A responsive table with feature rows down the left and 3 product columns; use check and dash icons for yes/no and short text for nuanced cells. Highlight the [product] column with a primary-tinted background and a "Recommended" tag.
Rows: [feature 1], [feature 2], [feature 3], [feature 4], [feature 5], [pricing].
Constraints: Next.js, Tailwind, shadcn/ui. Tokens: bg #FFFFFF, foreground #0F172A, primary #2563EB, radius 12px, Inter. On mobile, collapse into stacked per-competitor cards instead of a horizontally scrolling table. Down to 360px.Why it works: the mobile-collapse instruction avoids the unreadable scrolling-table failure mode most comparison sections hit on phones.
21. Newsletter footer with server action
Build a footer for [product] with 4 link columns (Product, Company, Resources, Legal), a brand mark with a one-line tagline, social icons, and a newsletter signup in its own row.
Wire the newsletter: a Next.js server action that validates the email and inserts into a Supabase "subscribers" table, with an inline success/error message and a pending state on the button.
Constraints: Next.js App Router, Tailwind, shadcn/ui, TypeScript. Tokens: bg #0A0A0A, foreground #A1A1AA, headings #FAFAFA, primary #22D3EE, radius 8px, Inter. Columns collapse to an accordion below 640px. Responsive down to 360px.Best for: capturing lower-intent visitors who won't sign up but will subscribe.
Full one-page sites
To assemble a complete page, chain the sections with prompt queuing, or hand v0 a screenshot to match. Then deploy.
22. Full one-page SaaS site, queued
Build a complete one-page marketing site for [product]. Work through these as a queue, one section at a time, keeping the same tokens throughout:
1. Sticky nav (logo, 4 anchor links, "Start free" button, mobile hamburger).
2. Hero with primary + ghost CTA and a screenshot.
3. Logo cloud.
4. 6-item feature grid with lucide icons.
5. 3 alternating feature rows.
6. Testimonial wall (6 quotes + stat row).
7. 3-tier pricing with monthly/annual toggle.
8. FAQ accordion (6 items).
9. Final CTA band with inline email capture.
10. Footer with 4 columns + newsletter.
Shared tokens: bg #FFFFFF, foreground #0F172A, primary #2563EB, muted #64748B, radius 12px, Inter 400/600/800, section padding 80px, container max-width 1200px. Every section responsive down to 360px. Smooth-scroll the nav anchors. When all sections exist, deploy to Vercel.Why it works: prompt queuing lets v0 build section by section in order while holding one shared token set, so the finished page is consistent and each block stays independently editable.
23. One-page site from a screenshot
[Attach a screenshot of a landing page you like, then send:]
Rebuild a landing page for [product] that matches the layout, spacing, and type scale of the attached screenshot — but use my content and my tokens, not the original brand. Keep the section order from the image (hero, features, social proof, pricing, footer).
My tokens: bg [#hex], foreground [#hex], primary [#hex], radius [Npx], font [Inter], headline weight 800. My copy: headline "[...]", subhead "[...]", primary CTA "[...]".
Constraints: Next.js App Router, Tailwind, shadcn/ui, TypeScript. Real, editable components — do not hardcode the screenshot as an image. Responsive down to 360px; then deploy to Vercel.Best for: matching a reference design's proportions fast while keeping your own brand and real code. Attaching an image is v0's most reliable way to lock in layout.
24. Add a landing route to an existing repo
Import my repo and add a new marketing landing page at the route /[launch] without touching any existing app logic.
Follow this repo's conventions: reuse the existing Tailwind config and design tokens, the existing shadcn/ui components, and the established folder structure. The page has a hero, a 3-item feature row, a waitlist email capture wired to the existing [Supabase/Prisma] setup, and a footer.
Constraints: Next.js App Router, TypeScript. Match the tokens already defined in the repo — do not introduce new colors or a second UI kit. Add the page behind a feature branch and open a pull request with a short description of what changed. Keep the diff limited to the new route and its components.Why it works: the new v0 can import an existing codebase and open a PR through its GitHub integration, so scoping it to a new route with the repo's own tokens gives you a clean, mergeable landing page. Ready for more building blocks? See v0 prompts for UI components.
Frequently Asked Questions
How do I write a good v0 prompt for a landing page?
Use v0's product-surface, context, and constraints structure. Name the exact sections (hero, logo cloud, pricing, FAQ, footer CTA), say who the page is for and what action it should drive, and pin down concrete design tokens: colors, border radius, font weights, and spacing. Specify the stack (Next.js App Router, Tailwind, shadcn/ui) and define done, such as responsive down to 360px.
What stack does v0 generate landing pages in?
v0 by Vercel emits production-ready React and Next.js (App Router) with Tailwind CSS and shadcn/ui components in TypeScript. It can add server actions and route handlers, wire a database like Supabase, Neon, or Postgres for a waitlist table, and deploy to Vercel in one click.
Can v0 build a working waitlist form?
Yes. Ask v0 to wire the email input to a Next.js server action that inserts into a Supabase table, with client and server validation, an optimistic success state, and duplicate-email handling. v0 can create the table, the server action, and the env vars, then deploy the whole flow to Vercel.
How do I get v0 to match my exact colors and fonts?
Give v0 explicit design tokens in the prompt: hex values for background, foreground, primary, and accent; a border-radius value; font family and weights; and a spacing scale. After the first generation, open Design Mode to nudge colors, spacing, and typography visually without re-prompting.
Should I build a landing page in one prompt or several?
For a single section, one prompt is fine. For a full one-page site, ask v0 for a short PRD or a plan first, then build section by section and use prompt queuing to chain the hero, features, pricing, testimonials, FAQ, and footer in order. Component-by-component prompting produces cleaner, more editable code.
How do I attach a design reference to a v0 prompt?
Drag a screenshot or image into the v0 chat and reference it in the prompt, for example: match the spacing and type scale in the attached screenshot. You can also import a frame from Figma. v0 uses the reference for layout and tone while still generating real, editable code.
Why do my v0 credits run out so fast on landing pages?
Every generation burns credits, even failed ones, so vague prompts that need three retries cost three times as much. Front-load the detail: exact sections, tokens, and a clear done-condition in one tight prompt. Use Design Mode for small visual tweaks instead of a fresh generation, since visual edits do not re-run the model the same way.
Can I import my existing repo and add a landing page?
Yes. The new v0 can import an existing codebase and work on it directly, including opening a branch and a pull request through its GitHub integration. Point it at your repo, tell it to follow the existing routing and component conventions, and have it add the new marketing route without touching app logic.