How to Build and Deploy a SaaS Landing Page with v0 Using Shadcn/UI Components and Vercel
How to Build and Deploy a SaaS Landing Page with v0 Using Shadcn/UI Components, Custom Design Tokens, and Vercel One-Click Deployment
v0 by Vercel is an AI-powered generative UI tool that transforms natural language prompts into production-ready React code built on Shadcn/UI and Tailwind CSS. In this guide, you’ll learn how to go from a blank prompt to a fully deployed SaaS landing page — complete with custom design tokens, polished component composition, and one-click deployment to Vercel.
Prerequisites
- A free or Pro v0.dev account- A Vercel account (free tier works)- Node.js 18+ and pnpm (or npm/yarn) installed locally- Basic familiarity with React and Tailwind CSS
Step 1: Generate the Landing Page in v0
Open v0.dev and enter a detailed prompt. The more specific you are, the better the output.
Build a modern SaaS landing page with:
- A hero section with headline, subheadline, CTA button, and a gradient background
- A features grid with 3 cards using icons
- A pricing section with 3 tiers (Free, Pro, Enterprise) using Shadcn/UI Card components
- A testimonials carousel
A footer with links and a newsletter signup form Use Shadcn/UI components: Button, Card, Input, Badge. Use a dark theme with purple accent colors.v0 will generate a complete React component. Review the preview, then click “Add to Codebase” or “Copy Code”.
Step 2: Scaffold Your Local Project
If you don’t already have a Next.js project, create one with Shadcn/UI pre-configured:
npx create-next-app@latest my-saas-landing —typescript —tailwind —eslint —app —src-dir
cd my-saas-landing
npx shadcn@latest init
When prompted, select your preferred style (New York or Default) and base color. Then install the components v0 used:
npx shadcn@latest add button card input badge
Step 3: Integrate the v0-Generated Code
If you used the **v0 CLI**, you can pull the generation directly:
npx v0@latest add YOUR_GENERATION_ID
This places the generated component in your project. Alternatively, paste the copied code into src/app/page.tsx:
// src/app/page.tsx
import { HeroSection } from "@/components/hero-section";
import { FeaturesGrid } from "@/components/features-grid";
import { PricingSection } from "@/components/pricing-section";
import { TestimonialsCarousel } from "@/components/testimonials-carousel";
import { Footer } from "@/components/footer";
export default function LandingPage() {
return (
);
}
## Step 4: Configure Custom Design Tokens
Open src/app/globals.css and define custom design tokens using CSS variables. These override Shadcn/UI's default theme:
@layer base {
:root {
--background: 0 0% 100%;
--foreground: 240 10% 3.9%;
--primary: 263 70% 58%;
--primary-foreground: 0 0% 100%;
--secondary: 240 4.8% 95.9%;
--accent: 263 70% 50%;
--accent-foreground: 0 0% 100%;
--muted: 240 4.8% 95.9%;
--muted-foreground: 240 3.8% 46.1%;
--card: 0 0% 100%;
--card-foreground: 240 10% 3.9%;
--border: 240 5.9% 90%;
--radius: 0.75rem;
}
.dark {
—background: 240 10% 3.9%;
—foreground: 0 0% 98%;
—primary: 263 70% 65%;
—primary-foreground: 0 0% 100%;
—secondary: 240 3.7% 15.9%;
—accent: 270 60% 55%;
—card: 240 10% 6%;
—card-foreground: 0 0% 98%;
—border: 240 3.7% 20%;
}
}
Extend your tailwind.config.ts to map these tokens:
// tailwind.config.ts
import type { Config } from “tailwindcss”;
const config: Config = {
darkMode: “class”,
content: [”./src/**/*.{ts,tsx}”],
theme: {
extend: {
colors: {
brand: {
DEFAULT: “hsl(var(—primary))”,
foreground: “hsl(var(—primary-foreground))”,
},
accent: {
DEFAULT: “hsl(var(—accent))”,
foreground: “hsl(var(—accent-foreground))”,
},
},
borderRadius: {
lg: “var(—radius)”,
md: “calc(var(—radius) - 2px)”,
sm: “calc(var(—radius) - 4px)”,
},
},
},
plugins: [require(“tailwindcss-animate”)],
};
export default config;
Step 5: Preview Locally
pnpm devOpen http://localhost:3000 and verify your layout, tokens, and dark mode toggle work correctly.
Step 6: Deploy to Vercel with One Click
Push your project to GitHub:
git init
git add .
git commit -m “feat: SaaS landing page with v0 and shadcn/ui”
git remote add origin https://github.com/YOUR_USERNAME/my-saas-landing.git
git push -u origin main
Then deploy via the Vercel CLI or dashboard:
# Option A: Vercel CLI
npm i -g vercel
vercel —prod
Option B: Visit vercel.com/new, import the GitHub repo, and click Deploy
Vercel auto-detects Next.js and deploys with zero configuration. Your landing page is live in under 60 seconds.
Adding Environment Variables (if needed)
If your landing page connects to a CMS or analytics API:
vercel env add NEXT_PUBLIC_ANALYTICS_ID
Enter: YOUR_API_KEY
Pro Tips for Power Users
- Iterate in v0: Use follow-up prompts like “Make the pricing cards more compact” or “Add a floating navbar with blur effect” to refine components before exporting.- Use v0 Blocks: v0 offers pre-built landing page blocks (hero, pricing, FAQ). Combine multiple blocks in one prompt to save time.- Shadcn/UI Theme Editor: Use the Shadcn/UI theme generator to visually pick your HSL design tokens, then paste them directly into
globals.css.- Preview Deploy Hooks: Set up Vercel GitHub integration so every pull request gets an automatic preview URL — perfect for stakeholder reviews.- Performance: Addnext/fontfor optimized font loading and use
Troubleshooting Common Errors
| Error | Cause | Solution |
|---|---|---|
Module not found: @/components/ui/button | Shadcn/UI component not installed | Run npx shadcn@latest add button |
TypeError: Cannot read properties of undefined (reading 'className') | v0 generated code referencing a component you haven't added | Check the imports and install missing Shadcn/UI components |
| CSS variables not applying in dark mode | Missing darkMode: "class" in Tailwind config | Add darkMode: "class" to tailwind.config.ts and wrap your app with a theme provider |
Vercel build fails with Type error | TypeScript strict mode catching v0 output | Fix type annotations or temporarily set "strict": false in tsconfig.json while iterating |
hydration mismatch warnings | Client/server rendering differences in theme detection | Use next-themes with suppressHydrationWarning on the |
Is v0 free to use for generating SaaS landing pages?
v0 offers a free tier with a limited number of generations per month. For professional use, the Pro plan provides higher generation limits, priority queue access, and longer conversation threads. The generated code itself is yours to use commercially with no licensing restrictions — it outputs standard React with Shadcn/UI and Tailwind CSS.
Can I customize the Shadcn/UI components after v0 generates them?
Absolutely. Unlike traditional component libraries, Shadcn/UI copies component source code directly into your project under src/components/ui/. You have full ownership and can modify styles, behavior, and markup. This makes it ideal for applying your brand’s custom design tokens, adjusting spacing, or adding animations beyond what v0 initially generated.
How do I add a custom domain to my Vercel deployment?
In the Vercel dashboard, navigate to your project’s Settings > Domains. Enter your custom domain (e.g., www.yoursaas.com), then update your DNS provider’s records with the values Vercel provides (typically an A record pointing to 76.76.21.21 or a CNAME to cname.vercel-dns.com). SSL certificates are provisioned automatically. The process takes 5–10 minutes for DNS propagation.