Building Your First UI with v0 — Vercel's AI UI Generator

What is v0?

v0 is Vercel’s AI tool for generating user interfaces. You describe what you want in plain English, and it generates production-ready React code using:

• React (with TypeScript)
• Tailwind CSS for styling
• Shadcn UI components when appropriate

The result is clean, modern, accessible code that you can copy directly into your project.

---

Getting Started

Step 1: Access v0

Visit v0.dev and sign in with your GitHub account. You’ll get free generations per day (more with Vercel Pro).

Step 2: Start a New Project

Click “New Project” and you’ll see the interface with:

• A text input for your prompt
• Generated preview on the right
• Iteration controls

---

Your First UI: A Landing Page

Let’s build a SaaS landing page to demonstrate v0’s capabilities.

Initial Prompt

Enter this in the prompt box:

Create a modern SaaS landing page for an AI coding assistant. Include:
- Navigation with logo, links, and "Get Started" button
- Hero section with headline, subtext, and two CTA buttons
- Features grid showing 3 key features with icons
- Pricing section with 3 tiers
- Footer with links and copyright

v0 will generate the code and show you a live preview. This typically takes 10-30 seconds.

Review the Output

Examine what v0 generated:

• Is the design clean and modern?
• Are the colors consistent?
• Is the responsive behavior correct?

---

Iterating on Your Design

Adding Modifications

Once you have a base design, refine it with follow-up prompts:

Change the color scheme:

Change the primary color to purple and update all accent elements

Add a new section:

Add a testimonials section with 3 quote cards between features and pricing

Modify existing content:

Make the hero headline larger and change the subtext to mention "enterprise-grade security"

Using the Visual Editor

v0 also offers point-and-click editing:

1. Hover over any element in the preview
2. Click to select it
3. Modify properties directly (text, colors, spacing)

This is useful for small tweaks that are faster to do visually than describe in text.

---

Key Features

1. Multi-Page Generation

Request multiple pages at once:

Create a full website with: landing page, pricing page, and about page. Include consistent navigation across all pages.

2. Component Generation

Generate individual components:

Create a reusable card component with image, title, description, and "Learn More" link

3. Responsive Design

v0 automatically generates responsive code. Specify breakpoints if needed:

Make the features grid show 1 column on mobile, 2 on tablet, 3 on desktop

4. Dark Mode Support

Request dark mode from the start:

Build this with dark mode support using Tailwind's dark: variant

---

Exporting Your Code

Copy to Clipboard

Click “Copy Code” to copy the generated React component(s). The code includes:

• All necessary imports
• TypeScript types
• Tailwind classes
• Any required component props

Download as Project

Click “Download” to get a complete project with:

my-v0-project/
├── components/
│   ├── Hero.tsx
│   ├── Features.tsx
│   └── Pricing.tsx
├── app/
│   └── page.tsx
├── tailwind.config.ts
└── package.json

Connect to GitHub

Connect your GitHub account to push directly to a repo.

---

Best Practices

1. Start Simple, Then Add Complexity

Begin with a basic prompt:

Create a login form with email and password fields

Then iterate:

Add a "Remember me" checkbox
Add a "Forgot password" link
Add social login buttons (Google, GitHub)

2. Be Specific About Style

Instead of: “Make it look nice”

Try: “Use a dark theme with emerald green accents, rounded corners (8px), and subtle shadows”

3. Reference Design Systems

If you have specific requirements:

Use the Shadcn UI component library style
Follow the Stripe design aesthetic
Match the Apple design language

4. Specify Framework Requirements

Use React Server Components
Implement with Next.js App Router
Use only Tailwind CSS (no custom CSS)

---

Code Quality

What You Get

v0 generates production-quality code:

• TypeScript with proper types
• Accessible HTML (ARIA labels, semantic elements)
• Responsive layouts
• Clean component structure

What to Verify

Always review generated code for:

1. Logic — AI can make mistakes in complex logic
2. Performance — Check for unnecessary re-renders
3. Accessibility — Verify ARIA labels and keyboard navigation
4. Edge cases — Ensure error states are handled

---

Use Cases

Rapid Prototyping

v0 is perfect for quickly visualizing ideas:

• Pitch decks and demos
• A/B testing different designs
• Validating concepts before engineering

Learning Tool

Use v0 to learn React and Tailwind:

• See how experts structure components
• Learn Tailwind class patterns
• Understand component composition

Developer Accelerator

Speed up development:

• Generate boilerplate components
• Create form components with validation
• Build landing pages in minutes

---

Limitations

What v0 Excels At

• Landing pages and marketing sites
• Form components
• Dashboard layouts
• Card-based designs

What Needs Work

• Complex interactive features
• Full application logic
• Integration with specific APIs
• Highly custom animations

---

Next Steps

Try building these projects:

1. Day 1: A personal portfolio site with blog
2. Day 2: A dashboard with charts and data tables
3. Day 3: A multi-page documentation site

Remember: v0 is a tool to accelerate your workflow, not replace understanding. Always review and test the generated code before deploying.