How to Build a Landing Page with v0: From Prompt to Next.js Deployment
Build a Landing Page with v0: Complete Step-by-Step Tutorial
v0 by Vercel is an AI-powered generative UI tool that transforms natural language prompts into production-ready React components built on Next.js, Tailwind CSS, and shadcn/ui. This tutorial walks you through the entire workflow — from writing your first prompt to deploying a polished landing page.
Prerequisites
- A Vercel account (free tier works)- Node.js 18+ installed locally- Basic familiarity with React and Next.js concepts- npm or pnpm package manager
Step-by-Step Guide
Step 1: Access v0 and Write Your First Prompt
Navigate to v0.dev and sign in with your Vercel account. In the prompt input field, describe the landing page you want. Specificity is key — vague prompts produce generic results.
Example prompt:
Build a modern SaaS landing page for a project management tool called “TaskFlow”. Include:
- A hero section with a headline, subheadline, and two CTA buttons
- A features grid with 4 feature cards using icons
- A pricing section with 3 tiers (Free, Pro, Enterprise)
- A testimonials carousel with 3 customer quotes
A footer with navigation links and social icons Use a blue and white color scheme with smooth scroll behavior.Press Enter or click Generate. v0 will produce multiple UI variations for you to review.
Step 2: Iterate and Refine the Design
v0 generates up to three design variations. Select the one closest to your vision, then refine it with follow-up prompts:
Make the hero section taller with a gradient background from blue-600 to indigo-700.
Change the pricing cards to have rounded-xl corners and add a “Most Popular” badge on the Pro tier.
Add a mobile hamburger menu to the navigation bar.
Each iteration preserves context from previous prompts, so you can progressively refine without starting over.
Step 3: Review the Generated Code
Click the Code tab to inspect the generated output. v0 produces clean React components using shadcn/ui primitives:
// Example generated component structure
import { Button } from ”@/components/ui/button”
import { Card, CardContent, CardHeader, CardTitle } from ”@/components/ui/card”
export default function LandingPage() {
return (
Manage Projects Effortlessly
TaskFlow helps teams ship faster with less chaos.
)
}
Step 4: Add the Code to a Next.js Project
Click “Add to Codebase” in v0, or set up a new project manually:
npx create-next-app@latest taskflow-landing —typescript —tailwind —app
cd taskflow-landing
Install shadcn/ui and initialize it:
npx shadcn@latest init
When prompted, select your preferred style and base color. Then install the components used by v0:
npx shadcn@latest add button card badge
Copy the generated code from v0 into your project. Place the landing page component at app/page.tsx:
// app/page.tsx
import LandingPage from ”@/components/landing-page”
export default function Home() {
return
Step 5: Install the v0 CLI (Optional but Recommended)
The v0 CLI lets you pull generated components directly into your project:
npx v0@latest add [component-url]
This automatically resolves dependencies, installs required shadcn/ui components, and places files in the correct directories.
Step 6: Test Locally
Run the development server and verify everything works:
npm run dev
Open http://localhost:3000 in your browser. Test responsive behavior by resizing the window and verify all interactive elements function correctly.
Step 7: Deploy to Vercel
Push your code to a Git repository and deploy:
git init
git add .
git commit -m “Initial landing page from v0”
git remote add origin https://github.com/yourusername/taskflow-landing.git
git push -u origin main
Then deploy via the Vercel CLI:
npm i -g vercel
vercel —prod
Alternatively, connect your GitHub repository in the Vercel dashboard for automatic deployments on every push.
Pro Tips for Power Users
- Use reference URLs in prompts: Include phrases like “similar to the hero section on stripe.com” to guide v0 toward specific design patterns.- Prompt for accessibility: Add “ensure WCAG AA compliance with proper aria labels and keyboard navigation” to your prompt for accessible output.- Combine multiple generations: Generate the hero, features, and pricing sections separately with focused prompts, then merge them into one page for higher quality per section.- Lock working sections: When iterating, tell v0 “keep the hero section unchanged, only modify the pricing cards” to prevent regressions.- Use the fork feature: Fork a generation before making major changes so you can always return to a previous version.- Add custom fonts: After exporting, configure fonts in
app/layout.tsxusingnext/fontfor optimized loading.
Troubleshooting Common Issues
| Issue | Cause | Solution |
|---|---|---|
Module not found: @/components/ui/button | shadcn/ui component not installed | Run npx shadcn@latest add button |
| Styling looks broken after copy-paste | Tailwind CSS not configured or globals.css missing | Ensure @tailwind base; @tailwind components; @tailwind utilities; is in globals.css |
| Hydration mismatch errors | Browser extensions or dynamic content without client boundary | Add "use client" directive at the top of components using interactivity |
npx v0@latest fails | Outdated Node.js version | Update Node.js to version 18 or higher |
| Components render differently than v0 preview | Missing CSS variables from shadcn/ui theme | Re-run npx shadcn@latest init and verify tailwind.config.ts includes the shadcn preset |
| Phase | Tool | Output |
|---|---|---|
| Design | v0.dev prompt interface | Visual UI + React code |
| Refine | Follow-up prompts in v0 | Iterated design |
| Scaffold | create-next-app + shadcn CLI | Next.js project |
| Integrate | v0 CLI or manual copy | Components in codebase |
| Test | npm run dev | Local preview |
| Deploy | Vercel CLI or Git integration | Live production URL |
Is v0 free to use for building landing pages?
v0 offers a free tier with a limited number of generations per month. For most single landing page projects, the free tier is sufficient. If you need higher volume or priority generation, Vercel offers premium plans with increased quotas and faster generation times.
Can I customize the v0 output after exporting to my project?
Absolutely. The generated code is standard React with Tailwind CSS and shadcn/ui — there is no lock-in or proprietary runtime. Once the code is in your project, you own it entirely and can modify components, swap out the design system, add API integrations, or restructure the file layout however you need.
Does v0 support frameworks other than Next.js?
v0 generates React components that are primarily optimized for Next.js with the App Router. However, since the output is standard React and Tailwind CSS, you can adapt it for other React-based frameworks like Remix or Vite-based React projects with minor adjustments to routing and file structure.