v0 by Vercel
The fastest path from a sketch in your head to a working, styled web interface.
You are building a settings page. You know what fields you want, you know what it should look like, but every time you start writing the JSX and Tailwind classes, two hours evaporate. The code isn't hard — it's tedious. And then somebody asks for a design change.
Why this tool matters
v0 is Vercel's generative-UI tool: you describe a web interface in English, and it produces a live React + Tailwind + shadcn/ui component you can copy-paste into your project. The outputs are not “AI-slop” mockups — they are the exact kind of polished, accessible, Tailwind-styled components that a senior frontend developer would produce, generated in thirty seconds.
The step-change v0 introduces is fidelity. Earlier no-code tools produced proprietary output trapped inside their platform. v0 produces real component code using real open-source libraries (React, Tailwind, shadcn/ui) that you own and can edit forever. It is the production-quality starting point you would otherwise have spent half a day hand-writing.
For creators who build marketing sites, researchers who build interactive demos for papers, and anyone shipping to the web without a full design team, v0 compresses the design-to-code cycle from “a day of fiddling” to “iterate in English until it looks right, then copy the code.”
Setup
Account: sign in at v0.dev with a Vercel account (or GitHub). Free tier gives you a limited but real number of generations per month. Paid is $20/month for the Premium tier.
Prereq: basic familiarity with React and Tailwind. You don't need to be able to write them fluently; you need to be able to read what v0 produces so you can spot and fix issues.
Walkthrough
Step 1: Describe the component you need
Go to v0.dev. In the prompt box, describe the UI: “A settings page with four sections: Profile (name, email, avatar upload), Notifications (email, SMS, push toggles), Billing (current plan badge and a manage-billing button), and Danger Zone (delete account with confirmation modal). Use shadcn/ui components. Responsive.”
Step 2: Wait for the preview
v0 generates three candidate designs in about 45 seconds. Each is a live, interactive preview in your browser — you can actually click the buttons and open the modal. Pick the one closest to what you want.
Step 3: Iterate in natural language
Below the preview, the chat box lets you refine: “Move the avatar upload to the top and make it circular. The Danger Zone should have a red-tinted background.” v0 regenerates; usually within two or three rounds you have exactly what you want.
Step 4: Inspect the code
Click the Code tab. v0 shows you the React + Tailwind source for the current design. Read it — this is what you'll be pasting into your project. It should look like what a good frontend engineer would write, not like AI spaghetti.
Step 5: Install dependencies
If your project doesn't already have shadcn/ui, run the shadcn add commands v0 lists at the top of the code tab. This pulls the underlying components into your project so v0's generated code has its dependencies.
Step 6: Drop it into your app and refine
Copy the component, paste it into your project, wire it to your real data. You'll almost always make small changes — v0 produces static demos; turning them into real features is the last mile. That's fine; the first 80% was what was taking you all day.
Your turn
Basic: Regenerate one page on your site
Pick a single page or component on a site you're building or have built — a contact form, a pricing section, a feature grid, a footer. Describe it to v0 in 3-4 sentences. Compare what v0 produces to what you have. Which is better? Why? Copy the v0 code into a sandbox file and adapt it until it matches your brand.
Advanced: A multi-component mini-app in one session
Build a small, opinionated web app in a single v0 session: a reading-list tracker, an invoice generator, a research-paper organizer, a class-roster dashboard. Start with the shell: “A three-panel layout: left sidebar for nav, top bar with search and user menu, main area with the current view.”
Then iterate: “On the main area, show a table of items with columns X, Y, Z, a search filter above it, and a ‘New item’ button that opens a form in a side drawer.”
Keep refining until you have something that actually looks like a product you'd want to use. Export the code. Paste it into a real Next.js project. Get it rendering locally with dummy data.
Write a 150-word reflection: where did v0 save you time, and where did you still have to do the work by hand? That's the map for future v0 projects.
Pitfalls and pro tips
v0 builds demos, not systems. The components it generates look polished but use placeholder data, placeholder handlers, and hardcoded state. Wiring them to real backends, real auth, and real state management is on you.
shadcn/ui lock-in. v0's default output uses shadcn/ui and Tailwind. If your project uses a different UI library (MUI, Chakra, Mantine), v0's output will be awkward to integrate. Either adopt shadcn/ui for new work or translate the structure into your library by hand.
Accessibility is improving, not solved. v0's outputs have gotten dramatically better at accessible markup in 2025, but still occasionally miss ARIA labels, focus management, or keyboard navigation. Audit generated UIs for a11y before shipping.
How it compares
v0 competes with Bolt.new (Day 10, generates full-stack apps), Lovable (similar positioning, slightly different house style), and Galileo AI (Figma-style mockups rather than real code). The key differentiator: v0 produces React component source code you own. If you want a full deployed app with a database, Bolt.new is closer. If you want a Figma mockup to hand to a designer, Galileo is closer. For “I need a beautiful, functional React component right now,” v0 is unmatched.
When to use — and when not to
Use v0 when you're building a web interface, know roughly what you want, and are tired of hand-writing Tailwind classes. Perfect for landing pages, dashboards, forms, settings screens, and product pages.
Do not use v0 when you need a full-stack app deployed with a database and auth (use Bolt.new), when your existing codebase uses a non-React stack (Vue, Svelte, plain HTML), or when you're designing brand-new visual language from scratch and need freedom beyond shadcn/ui's aesthetic.