v0 by Vercel generates UI components from text descriptions. Describe what you want - a pricing table, a navigation bar, a hero section - and v0 creates it with clean, production-ready React code using Tailwind CSS and shadcn/ui components. For designers, v0 bridges the gap between concept and implementation, letting you explore ideas in working code.
1. Writing Effective Prompts for UI Generation
The quality of v0's output depends heavily on your prompt. Here's how to write great ones:
Be Specific About Components
Instead of 'make a card', try 'Create a product card with an image at the top (16:9 aspect ratio), product name, price with a strikethrough original price, star rating, and an Add to Cart button.'
Describe Visual Details
Include design specifications: 'Use rounded-lg corners, subtle shadow on hover, white background, 16px padding. The button should be full-width and use the primary brand color.'
Specify Layout and Spacing
Be explicit: 'Display in a 4-column grid on desktop, 2 columns on tablet, 1 column on mobile. Each card should have 24px gap between them.'
Reference Existing Patterns
You can reference known patterns: 'Create a header like Stripe's website', 'A pricing section similar to Linear', 'Navigation in the style of Notion'. v0 understands these references.
2. Iterating and Refining Generated Components
First generations are starting points. Here's how to refine them:
Follow-Up Prompts
After initial generation, continue refining: 'Make the button larger', 'Add an icon before the text', 'Increase spacing between sections', 'Make the hover effect more subtle'. Each prompt improves the component.
Request Variations
Ask for options: 'Show me three different button styles', 'Create a dark mode version', 'What would this look like with a gradient background?' Compare variations to find the best approach.
Add Interactivity
Request states and interactions: 'Add hover and focus states', 'Include loading and disabled states', 'Add a dropdown that opens on click'. v0 generates the necessary state management.
Fix Issues Naturally
Describe problems in plain language: 'The text is hard to read on the dark background', 'The layout breaks on narrow screens', 'The button looks too similar to the secondary action'. v0 addresses the issues.
3. Exporting Components to Your Projects
v0 generates code you can use directly in production:
Copy the Code
Every generation includes complete, working code. Copy it directly into your project. v0 uses React with Tailwind CSS and shadcn/ui, so components are ready to use if your project uses these tools.
Install Dependencies
v0 shows required dependencies. If you need shadcn components, run the provided commands. Usually it's 'npx shadcn@latest add [component]'. Dependencies are clearly listed.
Adapt to Your Stack
The code is clean and readable. If you use different tools, the structure translates well. Convert Tailwind classes to CSS modules, or adapt React to Vue - the logic remains the same.
Create Reusable Components
v0 generates well-structured code. Extract common patterns into reusable components. Build a library of v0-generated components that match your design system.
4. Combining v0 with Your Design System
Make v0 output consistent with your existing design language:
Reference Your Tokens
Include your design tokens in prompts: 'Use our primary color #6366f1, secondary #f0f0f0, border radius of 12px, and spacing scale of 4/8/16/24/32px.'
Match Component Patterns
If you have existing components, describe them: 'Our buttons have pill shape, medium shadow, and transition-all on hover. Match this style for the new form component.'
Specify Typography
Define your type system: 'Use Inter for all text. Headings are 600 weight, body is 400. H1 is 48px, H2 is 32px, body is 16px with 1.5 line height.'
Create a Prompt Template
Build a reusable prompt prefix with your design system basics. Start every v0 session with this context. Your generated components will be consistent from the start.
Key Takeaways
- Write detailed prompts with specific visual and layout requirements
- Iterate through follow-up prompts to refine generated components
- Copy code directly into projects - it's production-ready React
- Include your design tokens and patterns for consistent output
- Use v0 to rapidly explore ideas before committing to full implementation