What you'll learn
How to go from zero to your first working React component with v0 by Vercel — step-by-step, with real example prompts and common beginner pitfalls to avoid.
Step 1: Create Your Free Account
Go to v0.app and sign in with your GitHub or Vercel account. The free tier activates immediately — no credit card required. You get approximately $5/month in credits, enough for roughly 100 component generations.
Once you’re in, you’ll see the chat interface. This is where you’ll describe what you want to build.
Step 2: Write Your First Prompt
Start simple. The key to good v0 output is specificity — describe what you’re building, who uses it, and how it should look.
Example first prompt:
“A login form with email and password fields, a ‘Forgot password?’ link, and a blue ‘Sign In’ button. Use Tailwind CSS for styling and make it centered on the page with a white card on a gray background.”
Type this into the chat and press Enter. v0 will generate a complete React component in seconds — you’ll see the code in the left panel and a live preview on the right.
Step 3: Review and Iterate
Your first output won’t be perfect. That’s expected. Use natural language to refine:
- “Make the button full-width and add rounded corners”
- “Add a ‘Sign up’ link below the button”
- “Switch to a dark theme with a dark gray background”
v0 understands context — each iteration builds on the previous one. The live preview updates in real time as you refine.
Tip: If v0 generates broken output twice in a row, start a new chat. Copy your best result so far into the new prompt as a starting point.
Step 4: Export Your Component
When you’re happy with the result, you have two options:
Copy Code: Click the copy button to grab the component code. Paste it into your project.
GitHub Sync (recommended for real projects):
- Connect your GitHub repo in v0’s settings
- Click “Push to GitHub”
- v0 creates a branch with your component
- Open a pull request to review and merge
The GitHub workflow is better for team projects — it gives you version history and code review.
3 Beginner-Friendly Prompts to Try
1. Pricing Table
“A 3-column pricing table with Free, Pro ($29/mo), and Enterprise (custom) tiers. Each column shows features with checkmarks. Pro column is highlighted with a blue border. Responsive — stacks on mobile.”
2. Navigation Bar
“A responsive navigation bar with logo on the left, 4 links in the center (Home, Features, Pricing, Contact), and a ‘Get Started’ button on the right. Mobile: collapses to hamburger menu. Use shadcn/ui and Tailwind.”
3. Card Grid
“A 3-column card grid showing team members. Each card has a photo placeholder, name, role, and social links. Cards have hover shadow effect. Responsive: 1 column on mobile, 2 on tablet, 3 on desktop.”
Common Beginner Mistakes
| Mistake | Why It Hurts | How to Fix |
|---|---|---|
| Vague prompts | Generic, low-quality output | Be specific: include layout, colors, interactions |
| Not specifying the stack | v0 uses defaults you might not want | Always say “Next.js App Router, shadcn/ui, Tailwind, TypeScript” |
| Iterating too many times | Credit burn, degraded quality | Start fresh after 5-8 iterations |
| Skipping sandbox testing | Bugs discovered after export | Click through the UI in sandbox before pushing to GitHub |
| Expecting complex business logic | v0 generates UI and basic logic, not enterprise workflows | Use v0 for frontend and scaffolding — write complex logic yourself |
| Not reviewing code before deploying | Broken imports, security issues | Always run the generated code locally before deploying |
What to Expect in Your First Session
First 5 minutes: You’ll be surprised. The output quality is genuinely good — clean React code with proper TypeScript types, Tailwind classes, and working interactions.
First 30 minutes: You’ll discover iteration is both powerful and expensive. Each refinement costs credits. By minute 30, you’ll have a solid component that looks professional.
First hour: You’ll either be excited about the workflow or frustrated by the limitations. v0 is great at UI generation but won’t solve architecture problems or write complex business logic.
What to Build Next
Once you’re comfortable with v0’s basics:
- Build a full page — landing page, dashboard, or blog layout
- Add a database — describe a Postgres schema and v0 generates it
- Connect to GitHub — push a full project and deploy to Vercel
- Import from Figma — turn your designs into working code
Need More Help?
→ Start building with v0 for freeSources: Vercel official documentation, dev.to tutorials, DataCamp v0 guide, nxcode.io 2026 guide, YouTube beginner tutorials.