How to Use v0 by Vercel

Getting started with v0 by Vercel

In this guide, you'll learn how to start using v0 by Vercel to generate production-ready React components and full pages using text or image prompts. After reading, you'll be able to create your first UI component quickly and understand how to refine your results.

Step 1: Sign up and set up

1. Go to v0.dev.
2. Click on the "Get Started" button on the homepage.
3. Sign up using your email address or through GitHub.
4. Once you've confirmed your email, log in to your account.
5. Familiarise yourself with the dashboard, where you'll find options to start generating components.

Step 2: Your first UI component

1. In the dashboard, locate the "New Generation" button and click it.
2. Choose whether to use a text prompt or an image prompt.

- Text Prompt: Type a description of the UI component you want (e.g., "a button with rounded corners and a gradient background"). - Image Prompt: Upload an image that represents the UI style you want.

1. Click the "Generate" button.
2. Wait for the AI to process your request; this may take a few seconds.
3. Review the generated component. You can click on "Preview" to see how it looks.
4. If satisfied, click "Download Code" to save the component for your React project.

Step 3: Get better results

• Use clear and specific prompts to guide the AI. For example, specify colours, styles, and sizes in your text description.
• Experiment with different prompts to see how variations affect the output.
• Check the "Settings" menu to adjust generation parameters, such as the coding style or component complexity, to better match your needs.

Pro tip

When using text prompts, try to include examples of existing components or styles you like by referencing popular libraries or frameworks. This helps the AI understand your design preferences better.

Common mistake to avoid

Avoid vague descriptions in your prompts. Instead of saying "create a card", specify "create a product card with an image, title, description, and a 'Buy Now' button". This ensures the AI produces more relevant results.