How to Use v0 by Vercel

Open v0.dev in your browser. This is Vercel's AI-powered UI generation tool. The landing page shows example generations and a prompt input field.

v0 generates React components with Tailwind CSS and shadcn/ui by default. The output is real code you can copy into your project — not a mockup or wireframe.

Click Sign In and authenticate with your Vercel account. If you do not have one, creating a Vercel account is free and takes 30 seconds. You can sign up with GitHub, GitLab, Bitbucket, or email.

v0 offers a generous free tier with a limited number of generations per month. Premium plans unlock more generations, higher priority, and faster output.

Type a description of the UI you want in the prompt box. Be as detailed as you like. Here are some examples that produce great results:

A pricing page with 3 tiers (Free, Pro, Enterprise),
feature comparison table, toggle for monthly/annual billing,
gradient accent colors, and a FAQ accordion at the bottom.
Use a dark theme with blue accents.

Or something simpler to start:

A modern hero section with a headline, subtext,
email signup form, and a subtle gradient background.

After you submit your prompt, v0 generates one or more variations. Each variation includes:

• A live preview of the rendered component
• The full React/TypeScript source code
• Tailwind CSS classes for styling
• shadcn/ui components where appropriate

Click the Code tab to see the source. You can switch between the preview and code views to understand exactly what was generated.

The first generation is rarely perfect. Send follow-up messages to refine the design:

Make the hero section taller and center the content vertically.
Change the CTA button to a gradient from blue to purple.
Add a subtle pattern background instead of the solid color.

v0 remembers the context of your conversation. Each follow-up builds on the previous generation, so you can iteratively refine without starting over.

When you are happy with the result, you have two options:

• Copy code — Click the copy button and paste the component into your existing React/Next.js project. Add any missing dependencies with npm install.
• Deploy directly — Click "Deploy to Vercel" to create a new project with the generated code. v0 sets up a GitHub repo and deploys it in one step.

If you are copying code manually, make sure you have Tailwind CSS and the required shadcn/ui components installed in your project.

# Install shadcn/ui CLI if you haven't already
npx shadcn@latest init

# Add specific components v0 used
npx shadcn@latest add button card input

v0 generates clean Tailwind CSS that is easy to customize. Common adjustments:

• Colors — Swap color classes to match your brand. Replace blue-500 with your primary color.
• Spacing — Adjust padding and margins to fit your layout grid.
• Typography — Change font sizes, weights, and line heights to match your design system.
• Responsive behavior — v0 generates responsive code by default, but you may want to adjust breakpoints.

Push your project to GitHub and connect it to Vercel for automatic deployments. Every push to your main branch triggers a production deployment. Every pull request gets a preview URL.

# Push to GitHub
git add .
git commit -m "Add landing page from v0"
git push origin main

# Vercel deploys automatically if connected

If you used the "Deploy to Vercel" button from v0, this is already done. Your project is live, and future pushes to the repo will trigger redeployments.