v0

Workflows and tips for generating UI components with v0 by Vercel.

Visit v0 →

Capabilities

React Components

Generate React/Next.js components

Tailwind CSS

Styled with Tailwind utilities

TypeScript

Full TypeScript support

shadcn/ui

Uses shadcn/ui component patterns

Responsive

Mobile-first responsive designs

Animations

Framer Motion animations

Dark Mode

Define and test both themes

Accessibility

Check labels and keyboard use

Workflows

Component Generation

Generate individual UI components from text descriptions. State the expected behavior and visual rules.

  1. 1Describe the component: 'A pricing card with title, price, features list, and CTA button'
  2. 2Review the generated component
  3. 3Iterate: 'Make the button larger and add a hover effect'
  4. 4Review and test the code before deploying

Page Layout Generation

Create entire page layouts by describing the sections and structure you need.

  1. 1Describe the page: 'A landing page with hero, features grid, testimonials, and footer'
  2. 2Review the overall structure
  3. 3Refine individual sections as needed
  4. 4Export to your project

Iterative Refinement

Start with a rough idea and refine through conversation. v0 remembers context.

  1. 1Start broad: 'A dashboard for analytics'
  2. 2Add details: 'Add a sidebar with navigation'
  3. 3Refine styling: 'Use a dark theme with blue accents'
  4. 4Polish: 'Add subtle animations on hover'

Reference-Based Generation

Use your own designs or approved references to explain the layout and interactions.

  1. 1Upload an approved reference or describe the layout
  2. 2Describe the parts to use: 'Use this spacing and navigation pattern'
  3. 3Adjust to fit your needs
  4. 4Export the code

Component Library Building

Generate a consistent set of components for your design system.

  1. 1Define your style: 'Minimalist with rounded corners and subtle shadows'
  2. 2Generate base components: buttons, inputs, cards
  3. 3Keep the conversation going for consistency
  4. 4Export and organize in your codebase

Tips

Be Specific About Styling

Instead of 'make it look nice', say 'use a gradient background from blue-500 to purple-500 with rounded-xl corners'.

Reference Design Systems

Name the component library and supply your design tokens. For example: 'Use our shadcn/ui components and existing type scale'.

Specify the Tech Stack

Tell v0 what you're using: 'Generate this as a React component using Tailwind CSS and TypeScript'.

Use the Edit Feature

Select the part of the preview that needs work and describe one change. Check the result before continuing.

Iterate in Conversation

v0 remembers context. Say 'now add a loading state' or 'make the mobile version stack vertically'.

Ask for Variants

Request multiple options: 'Show me 3 different button styles' to explore possibilities.

Include States

Ask for all states upfront: 'Create a button with default, hover, active, and disabled states'.

Export Smart

Move the result into your repository and review its dependencies, styles, and data handling before release.

Best Practices

Start Simple, Add Complexity

Begin with structure, then add styling, then interactions. Easier to debug and iterate.

Review Generated Code

Review generated code for accessibility, performance, data handling, and project conventions.

Use for Prototyping

v0 excels at rapid prototyping. Use it to explore ideas quickly before committing to implementation.

Combine with Your Code

Generate components in v0, then integrate and customize in your actual codebase.

For current features and controls, see the official documentation.