How to Build a Multi-Page SaaS Landing Site in v0 with Reusable Components and Next.js Export

Build a Production-Ready SaaS Landing Site Using v0

v0 by Vercel is an AI-powered generative UI tool that lets you describe interfaces in natural language and receive fully functional React components built with shadcn/ui and Tailwind CSS. In this guide, you'll learn how to architect a complete multi-page SaaS landing site with reusable component blocks, responsive breakpoints, and a seamless one-click export to a Next.js project.

Prerequisites

• A Vercel account with v0 access at v0.dev
• Node.js 18+ and npm/pnpm installed locally
• Basic familiarity with React, Tailwind CSS, and Next.js App Router

Step-by-Step: Building Your SaaS Landing Site

Step 1: Plan Your Page Architecture

Before prompting v0, define the pages and shared blocks your site needs. A typical SaaS landing site includes:

1. Homepage — Hero, features grid, social proof, CTA
2. Pricing — Pricing tiers table, FAQ accordion
3. About — Team section, mission statement, timeline
4. Blog/Resources — Card grid layout with filters
5. Contact — Form with validation

Identify reusable blocks: Navbar, Footer, CTA Banner, Testimonial Card, and Feature Card. These will be generated once and shared across pages.

Step 2: Generate Reusable Component Blocks in v0

Open v0.dev and start with your shared components. Use precise, detailed prompts for best results:

Prompt for Navbar:
"Create a responsive SaaS navbar with logo placeholder on the left,
navigation links (Home, Features, Pricing, About, Contact) in the center,
and Sign In / Get Started buttons on the right. On mobile, collapse into
a hamburger menu with slide-out drawer. Use shadcn/ui components and
Tailwind CSS. Include dark mode toggle."

Prompt for Hero Section:
"Build a SaaS hero section with a large headline, subtitle paragraph,
two CTA buttons (primary and secondary), and a browser mockup image
placeholder on the right. Make it fully responsive: stacked layout on
mobile, side-by-side on md breakpoint and above. Add subtle gradient
background."

Prompt for Pricing Table:
"Generate a 3-tier pricing table (Starter, Pro, Enterprise) with monthly/
annual toggle switch. Each card shows price, feature list with check icons,
and a CTA button. Highlight the Pro tier as recommended. Responsive: single
column on mobile, 3 columns on lg breakpoint."

After each generation, review the output in v0's live preview. Click "Iterate" to refine, or use follow-up prompts like "Make the CTA buttons larger on mobile" or "Add an animated gradient border to the recommended tier."

Step 3: Compose Full Pages from Blocks

Once your individual blocks are ready, create full page compositions in v0:

Prompt for Homepage Composition:
"Combine these sections into a single page layout in order: Navbar,
Hero Section, Logos Bar (6 company logos in a row), 3-column Feature
Grid with icons, Testimonials carousel (3 cards), CTA Banner, Footer.
Ensure consistent spacing with py-16 between sections. Fully responsive."

Repeat this composition approach for each page (Pricing, About, Contact), swapping in the appropriate section blocks.

Step 4: Configure Responsive Breakpoints

v0 generates Tailwind-based responsive code by default. Verify and refine these breakpoints in the generated output:

<!-- Standard Tailwind breakpoint pattern used by v0 -->
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  <FeatureCard />
  <FeatureCard />
  <FeatureCard />
</div>
<!— Hero responsive layout —>
<section className=“flex flex-col lg:flex-row items-center gap-12 px-4 md:px-8 lg:px-16”>
<div className=“flex-1 text-center lg:text-left”>
<h1 className=“text-3xl md:text-5xl lg:text-6xl font-bold”>
Ship your SaaS faster
</h1>
</div>
<div className=“flex-1”>
<BrowserMockup />
</div>
</section>

Use v0’s preview pane to test at mobile (375px), tablet (768px), and desktop (1280px) widths before exporting.

Step 5: One-Click Export to Next.js

When your pages are finalized, click the “Code” tab in v0 and select “Add to Codebase”. v0 provides an npx command to scaffold directly:

# Initialize a new Next.js project if you don’t have one
npx create-next-app@latest my-saas-site —typescript —tailwind —app
cd my-saas-site

Install shadcn/ui (v0 components depend on it)
npx shadcn@latest init
Install specific v0-generated components via the CLI
npx shadcn@latest add button card badge separator
npx shadcn@latest add navigation-menu sheet accordion
Copy v0-generated component code into your project
v0 provides a direct install command for each generation:
npx v0 add YOUR_GENERATION_ID

This command pulls the generated component into components/ with all dependencies resolved.

Step 6: Organize Multi-Page Routing

Structure your Next.js App Router for the landing pages:

app/
├── layout.tsx          # Shared Navbar + Footer
├── page.tsx            # Homepage
├── pricing/
│   └── page.tsx        # Pricing page
├── about/
│   └── page.tsx        # About page
├── contact/
│   └── page.tsx        # Contact page
components/
├── navbar.tsx          # Reusable Navbar from v0
├── footer.tsx          # Reusable Footer from v0
├── hero-section.tsx
├── feature-card.tsx
├── pricing-table.tsx
├── cta-banner.tsx
└── testimonial-card.tsx

In your root layout.tsx, wrap all pages with shared components:

import { Navbar } from ”@/components/navbar”
import { Footer } from ”@/components/footer”

export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang=“en”>
<body>
<Navbar />
<main>{children}</main>
<Footer />
</body>
</html>
)
}

Step 7: Deploy to Vercel

# Push to GitHub and deploy
git init && git add . && git commit -m “Initial SaaS landing site”

Connect to Vercel via dashboard or CLI
npx vercel —prod

Pro Tips for Power Users

• Prompt chaining: Reference previous v0 generations in new prompts — “Using the navbar from generation abc123, create a page that…” — to maintain visual consistency.
• Design tokens: After export, centralize colors and spacing in tailwind.config.ts under theme.extend so all v0 components share a single source of truth.
• Batch generation: Generate all section variants (light/dark, compact/spacious) in one v0 session, then pick the best for each page.
• Animation: Ask v0 to add Framer Motion animations: “Add fade-in-up animation on scroll to each feature card using framer-motion.”
• SEO metadata: Add Next.js generateMetadata() per page after export for proper titles, descriptions, and Open Graph tags.
• Component variants: Prompt v0 with “Create 3 variants of this CTA banner: minimal, gradient, and image background” to build a flexible block library.

Troubleshooting Common Issues

Frequently Asked Questions

Can I use v0-generated components in an existing Next.js project instead of starting fresh?

Yes. The npx v0 add command works with any existing Next.js project that has shadcn/ui initialized. Simply ensure your project uses Tailwind CSS and the shadcn/ui CLI is configured, then run the add command. The generated component files will be placed in your components/ directory and you can import them into any page.

How do I maintain design consistency across multiple v0-generated pages?

Start by generating your core design system components first (buttons, cards, typography) and reference them in subsequent prompts. After export, centralize your color palette, font sizes, and spacing values in tailwind.config.ts. Use CSS variables defined in globals.css for theme colors so all components automatically stay in sync when you adjust the palette.

Is it possible to edit v0-generated components after exporting to Next.js?

Absolutely. Once exported, v0 components are standard React code in your repository with no vendor lock-in. You own the source files entirely and can refactor, extend, add state management, integrate API calls, or modify styling as needed. This is one of v0’s key advantages — it generates a starting point, not a dependency.