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:
- Homepage — Hero, features grid, social proof, CTA- Pricing — Pricing tiers table, FAQ accordion- About — Team section, mission statement, timeline- Blog/Resources — Card grid layout with filters- Contact — Form with validationIdentify 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:
Ship your SaaS faster
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 (
{children}