V0 Setup Guide: Vercel Account Linking, Framework Selection, shadcn/ui Customization & One-Click Deploy
V0 Setup Guide for Frontend Developers
V0 by Vercel is an AI-powered generative UI tool that transforms natural language prompts into production-ready React components built on shadcn/ui and Tailwind CSS. This guide walks you through the complete workflow — from linking your Vercel account to deploying a polished frontend to production in minutes.
Step 1: Create and Link Your Vercel Account
- Sign up at
v0.dev— Navigate to v0.dev and click Sign Up. You can authenticate with GitHub, GitLab, or email.- Link your Vercel account — After signing in, go to Settings → Connected Accounts and click Connect Vercel. Authorize the OAuth prompt to grant V0 deployment permissions.- Verify the connection — You should see your Vercel team or personal account listed under Connected Accounts with a green status indicator.Once linked, V0 can push generated projects directly to your Vercel dashboard for instant preview and production deployments.
Step 2: Generate Your First UI Component
In the V0 chat interface, describe the UI you need in plain English:
Create a responsive pricing page with three tiers: Free, Pro, and Enterprise.
Use cards with hover effects, a toggle for monthly/annual billing,
and a CTA button on each card.
V0 will generate a complete React component using shadcn/ui primitives like Card, Button, and Switch. You can iterate by sending follow-up prompts such as:
Make the Pro tier visually highlighted as the recommended plan.
Add a FAQ accordion section below the pricing cards.
Step 3: Select Your Framework and Scaffold Locally
When you're ready to move the generated code into your own project, use the V0 CLI:
npm i -g v0
v0 login
Initialize a new project with your preferred framework:
# Next.js (App Router) — recommended
npx create-next-app@latest my-v0-app --typescript --tailwind --eslint --app --src-dir
cd my-v0-app
Install shadcn/ui
npx shadcn@latest init
During shadcn init, select your preferences:
| Option | Recommended Value |
|---|---|
| Style | New York |
| Base Color | Zinc |
| CSS Variables | Yes |
| Tailwind CSS Config | tailwind.config.ts |
| Components Alias | @/components |
| Utils Alias | @/lib/utils |
npx v0 add [component-url]For example, if your V0 generation URL is https://v0.dev/chat/b/abc123:
npx v0 add https://v0.dev/chat/b/abc123
This copies the component files into your src/components directory and installs any missing shadcn/ui dependencies automatically.
Step 5: Customize shadcn/ui Components
Since shadcn/ui components live in your codebase (not hidden in node_modules), you can customize them freely.
Modify Theme Colors
Edit src/app/globals.css to change your design tokens:
@layer base {
:root {
—primary: 222.2 47.4% 11.2%;
—primary-foreground: 210 40% 98%;
—accent: 262.1 83.3% 57.8%;
—accent-foreground: 210 40% 98%;
—radius: 0.75rem;
}
.dark {
—primary: 210 40% 98%;
—primary-foreground: 222.2 47.4% 11.2%;
}
}
Extend a Component
Open src/components/ui/button.tsx and add a custom variant:
const buttonVariants = cva(
"inline-flex items-center justify-center ...",
{
variants: {
variant: {
default: "bg-primary text-primary-foreground hover:bg-primary/90",
gradient: "bg-gradient-to-r from-purple-500 to-pink-500 text-white hover:opacity-90",
// ...other variants
},
},
}
);
Now use it anywhere:
## Step 6: One-Click Deploy to Production
Option A: Deploy from V0 Directly
In the V0 interface, click the **Deploy** button. Since your Vercel account is linked, V0 will:
- Create a new Git repository in your connected GitHub account- Push the generated code- Trigger a Vercel build and deploy- Return a live production URL within seconds
### Option B: Deploy from Your Local Project
# Install Vercel CLI
npm i -g vercel
Login and deploy
vercel login
vercel —prod
Set environment variables if your project needs them:
vercel env add API_KEY production
Enter value: YOUR_API_KEY
Pro Tips
- Use V0 with existing designs — Paste a screenshot or Figma export URL into V0’s chat. It will interpret the visual and generate matching components.- Chain prompts for complex pages — Build page sections one at a time (hero, features, testimonials) then ask V0 to compose them into a full page layout.- Lock component versions — After customizing shadcn/ui components, commit them. Running
npx shadcn@latest add buttonagain will overwrite your changes unless you decline the prompt.- Batch component imports — Install multiple shadcn/ui primitives at once:npx shadcn@latest add card button badge dialog- Use V0’s API programmatically — For teams building internal tools, you can call V0’s generation API:curl -X POST https://api.v0.dev/v1/generate
-H “Authorization: Bearer YOUR_API_KEY”
-H “Content-Type: application/json”
-d ’{“prompt”: “A dashboard sidebar with navigation and user avatar”}‘
Troubleshooting
| Error | Cause | Solution |
|---|---|---|
ERR_MODULE_NOT_FOUND: @/components/ui/button | shadcn/ui component not installed | Run npx shadcn@latest add button |
Vercel account not connected | OAuth token expired or never linked | Go to v0.dev → Settings → Connected Accounts → Reconnect Vercel |
Tailwind classes not applying | Content paths missing in Tailwind config | Ensure content in tailwind.config.ts includes "./src/**/*.{ts,tsx}" |
hydration mismatch warnings | Client-only code in server component | Add "use client" directive at the top of interactive components |
Deploy fails with Build error | Missing environment variables | Add required env vars via vercel env add or Vercel dashboard |
Can I use V0 with frameworks other than Next.js?
V0 generates standard React components with Tailwind CSS and shadcn/ui, so the output works with any React-based framework including Remix, Vite + React, and Astro with React islands. However, Next.js App Router receives the best support since V0 can generate server components, API routes, and metadata exports natively. For other frameworks, you may need to remove Next.js-specific imports like next/image or next/link and replace them with standard HTML equivalents.
Is V0 free, and what are the plan limits?
V0 offers a free tier that includes a limited number of generations per month. The Premium plan provides unlimited generations, priority access to new models, faster output, and the ability to deploy directly to Vercel with custom domains. Teams on Vercel Enterprise get V0 Premium included. Check v0.dev/pricing for current tier details and generation quotas.
How do I keep V0-generated components in sync with design system updates?
Since shadcn/ui components are copied into your source code rather than installed as a package dependency, updates are manual by design. The recommended workflow is to regenerate components in V0 when your design system changes, then use npx v0 add to pull the updated code. Use version control diffs to review changes before merging. For teams, establish a shared V0 prompt library so that regenerated components stay consistent with your design tokens and conventions.