---

title: v0.dev date: 2024-12-09 10:00:00 background: bg-[#000000] tags: - AI - UI - React - Vercel categories: - AI intro: v0.dev AI UI generator cheat sheet covering prompts for generating React components, styling, and best practices for UI development plugins: - copyCode

Overview

What is v0

• AI-powered UI component generator by Vercel
• Generates React code with Tailwind CSS
• Uses shadcn/ui component library
• Outputs production-ready code
• Supports iterative refinement

Key Features

Tech Stack Generated

• React / Next.js
• TypeScript
• Tailwind CSS
• shadcn/ui components
• Lucide icons
• Radix UI primitives

Prompt Basics {.cols-2}

Basic Structure

Create a [component type] that [functionality]
with [styling/features]

Component Types

• Landing page
• Dashboard
• Form
• Card
• Modal/Dialog
• Navigation
• Table
• Chart
• Profile page
• Settings panel

Styling Keywords

• Modern / Minimal / Clean
• Dark mode / Light mode
• Rounded corners
• Subtle shadows
• Gradient backgrounds
• Glass effect / Glassmorphism
• Neumorphism

Layout Keywords

• Responsive
• Mobile-first
• Grid layout
• Flexbox
• Sidebar layout
• Full-width
• Centered
• Split screen

Prompt Examples {.cols-2}

Landing Pages

Hero Section

Create a modern hero section for a SaaS product
with a headline, subheading, CTA button, and
a product screenshot mockup. Include gradient
background and floating elements.

Pricing Page

Create a pricing page with 3 tiers:
- Free, Pro ($29/mo), Enterprise (custom)
- Include feature comparison
- Highlight recommended plan
- Add toggle for monthly/yearly billing
- Modern card design with hover effects

Features Section

Create a features section with 6 feature cards
in a 3x2 grid. Each card has an icon, title,
and description. Include subtle animations
on hover.

Dashboards

Analytics Dashboard

Create an analytics dashboard with:
- Stats cards (users, revenue, orders, growth)
- Line chart for trends
- Recent activity list
- Sidebar navigation
- Dark mode design

Admin Panel

Create an admin dashboard layout with:
- Collapsible sidebar
- Top navbar with search and user menu
- Main content area with stats
- Recent orders table
- Quick actions panel

Forms

Login Form

Create a login form with:
- Email and password fields
- Remember me checkbox
- Forgot password link
- Social login buttons (Google, GitHub)
- Clean, centered card design

Multi-Step Form

Create a multi-step form wizard with:
- Progress indicator showing 4 steps
- Personal info, Address, Payment, Review
- Back and Next buttons
- Form validation indicators
- Smooth transitions between steps

Contact Form

Create a contact form with:
- Name, email, subject fields
- Message textarea
- File attachment option
- Submit button with loading state
- Success/error messages

Cards & Components

Product Card

Create an e-commerce product card with:
- Product image with hover zoom
- Title, price, rating stars
- Add to cart button
- Wishlist icon
- Sale badge option

User Profile Card

Create a user profile card with:
- Avatar image
- Name and role/title
- Bio text
- Social media links
- Follow/Message buttons
- Stats (followers, following, posts)

Testimonial Card

Create a testimonial card with:
- Customer photo
- Quote text
- Name and company
- Star rating
- Subtle background pattern

Navigation

Navbar

Create a responsive navbar with:
- Logo on the left
- Navigation links in center
- Search bar
- User dropdown on right
- Mobile hamburger menu
- Sticky on scroll

Sidebar

Create a dashboard sidebar with:
- Logo at top
- Navigation sections with icons
- Collapsible sub-menus
- Active state indicator
- Collapse button
- User info at bottom

Tables

Data Table

Create a data table with:
- Search and filter options
- Sortable columns
- Pagination
- Row selection checkboxes
- Actions dropdown per row
- Responsive design

Advanced Prompts

E-commerce

Create a complete e-commerce product page with:
- Image gallery with thumbnails
- Product title, price, ratings
- Size and color selectors
- Quantity picker
- Add to cart and buy now buttons
- Product tabs (description, reviews, shipping)
- Related products section

SaaS Application

Create a SaaS project management interface with:
- Kanban board with 3 columns
- Draggable task cards
- Add new task button
- Task card with title, assignee avatar,
  due date, and priority tag
- Column actions menu

Blog/Content

Create a blog post page with:
- Hero image
- Title, author info, date
- Reading time estimate
- Article content with typography
- Table of contents sidebar
- Share buttons
- Related posts at bottom
- Comments section

Settings Page

Create a settings page with:
- Vertical tabs navigation
- Profile settings section
- Notification preferences with toggles
- Security settings (password, 2FA)
- Connected accounts
- Danger zone (delete account)
- Save changes button

Refinement Prompts {.cols-2}

Styling Changes

Make it more modern with:
- Rounded corners (larger radius)
- Subtle shadows
- More whitespace
- Smoother transitions

Add dark mode variant

Change color scheme to use
blue and purple gradients

Layout Changes

Make it responsive for mobile:
- Stack elements vertically
- Larger touch targets
- Collapsible sections

Add more whitespace between sections

Change to a 2-column layout on desktop

Feature Additions

Add a loading skeleton state

Add hover animations to the cards

Include form validation with
error messages

Add success and error toast notifications

Content Changes

Replace placeholder text with
realistic content for a fitness app

Add more items to the navigation

Include empty state for when
there's no data

Best Practices

Writing Effective Prompts

1. Be specific - Include exact requirements
2. Mention components - Cards, buttons, forms
3. Specify layout - Grid, flex, sidebar
4. Include states - Hover, active, loading
5. Consider responsive - Mobile, tablet, desktop

Iterative Refinement

Step 1: Generate basic structure
"Create a dashboard layout"

Step 2: Add components
"Add stats cards at the top"

Step 3: Refine styling
"Use a blue color scheme"

Step 4: Add features
"Include loading states"

Export Best Practices

1. Review generated code
2. Check dependencies needed
3. Install required packages
4. Copy components to project
5. Customize as needed

Code Export

Using Generated Code

1. Install dependencies

npx shadcn@latest init
npx shadcn@latest add button card input
npm install lucide-react

2. Copy component code

// Copy from v0 to your components folder
// components/ui/your-component.tsx

3. Import and use

import { YourComponent } from '@/components/ui/your-component';

export default function Page() {
	return <YourComponent />;
}

Required Setup

Next.js project

npx create-next-app@latest my-app
cd my-app
npx shadcn@latest init

Common Dependencies

{
	"dependencies": {
		"@radix-ui/react-*": "latest",
		"class-variance-authority": "^0.7.0",
		"clsx": "^2.0.0",
		"lucide-react": "^0.263.1",
		"tailwind-merge": "^1.14.0"
	}
}

Tips & Tricks

Get Better Results

• Reference popular designs (Stripe, Linear)
• Specify exact spacing (more/less whitespace)
• Mention animation preferences
• Include accessibility requirements
• Ask for multiple variations

Common Patterns

"Like [popular product]'s [component]"
Example: "Like Notion's sidebar navigation"

"Modern and minimal like Linear"

"With glassmorphism like Apple"

Accessibility

Add in your prompts:
- ARIA labels
- Keyboard navigation
- Focus indicators
- Screen reader support
- Color contrast compliance

Limitations

What v0 Can't Do

• Backend logic
• Database connections
• Authentication systems
• Real data fetching
• Complex state management
• Third-party API integrations

What You'll Need to Add

• API routes and data fetching
• Form submission handlers
• Authentication logic
• Real database queries
• Error boundary handling
• Unit tests

Keyboard Shortcuts