v0

Overview

Vercel's v0 generates React components with Tailwind CSS and shadcn/ui from a text description or a design screenshot. The output is clean, production-ready code that copies directly into any React project. The fastest way from idea to working UI component.

My Experience with v0

I've been using v0 for about eight months, almost always to spin up a single component inside a project that already exists rather than to build something from a blank canvas. The pitch — describe a component, get working code back — undersells what's actually useful here. The honest version: v0 is the fastest path I've found from "I need a pricing table" to a component sitting in my editor, but it's a narrow, opinionated tool that shines when you already know roughly what you want and are working in the stack it expects.

The text-to-component workflow, in practice

My usual flow is to describe the component almost like I'm briefing a junior dev: "a pricing card with a highlighted middle tier, monthly/annual toggle, and a CTA button." v0 generates a handful of variants at once, and I pick the closest one and refine it with follow-up prompts — "make the toggle a switch, not tabs" or "add a badge to the popular tier." Each iteration is fast, usually under a minute, and the diff-style regeneration means I'm not starting from zero every time. Once I'm happy, I copy the code straight into the project. No scaffolding, no config — it's just a component file.

Screenshot-to-code is the feature I use more than I expected

This is genuinely underrated and most people I talk to don't know it exists. I'll screenshot a UI pattern I like from a competitor's site, a Dribbble shot, or a Figma export, drop it into v0, and it recreates the layout in React and Tailwind. It's not pixel-perfect on the first pass — spacing and font choices need adjusting — but it gets the structure, hierarchy, and responsive behavior right far faster than I could hand-code it. For turning a design reference into a starting point, this beats the text prompt workflow outright.

shadcn/ui output quality and how easy it is to customize

The components v0 generates are built on shadcn/ui, and the quality is consistently higher than I expected from a generation tool. It's not a black box — you get actual component source, not a compiled bundle, so every button, input, and card is a real file you can open and edit. Because shadcn's pattern is "copy the component into your project, then own it," tweaking a v0 generation feels the same as tweaking hand-written code. I've swapped colors, restructured props, and merged pieces from two different generations into one component without fighting the output.

Why the React + Tailwind + shadcn stack fit matters so much

v0 only really makes sense if your project already uses this exact stack, and when it does, the fit is close to seamless. Utility classes match your existing Tailwind config, component structure follows the same conventions shadcn projects already use, and there's essentially zero adaptation tax between what v0 outputs and what's already in your codebase. I've tried nudging it toward plain CSS modules or styled-components for a legacy project and the results were noticeably worse — it clearly reasons best inside the stack it was built around.

Where it earns its keep: dashboards, forms, cards, and modals

The sweet spot is exactly the kind of UI every product needs and nobody enjoys writing by hand: dashboard layouts with stat cards and tables, multi-step forms with validation states, modal dialogs, settings panels, empty states. These are well-represented patterns with lots of prior art, and v0 handles them well on the first or second try. I reach for it constantly when building admin panels and internal tools — the parts of an app that need to look polished but don't need bespoke design thinking.

Honest weaknesses

If your stack isn't React, v0 isn't for you — it doesn't generate Vue, Svelte, or plain HTML, and there's no workaround. It's also strictly a UI tool, not a full-stack generator: it won't wire up your database, write your API routes, or build application logic, so anything beyond the component layer is on you. The bigger issue for me is that output starts to look similar across prompts — the same card shapes, spacing rhythm, and shadow treatments show up regardless of what I describe. For a unique product design, you'll spend real time pushing v0 away from its defaults.

v0 vs Bolt.new: components vs full apps

These get compared constantly and the distinction is simple once you've used both: v0 generates components you drop into an existing project; Bolt.new generates and runs an entire application, backend included, in the browser. When I need one well-built pricing card or dashboard layout for a codebase I'm already working in, v0 wins easily — it's faster and the output integrates cleanly. When I've wanted to spin up a whole small app from nothing — a waitlist page with a database, a quick internal tool — I've reached for Bolt.new instead. Think of v0 as a component generator and Bolt.new as an app generator; I use both, for different jobs.

Is the $20/mo Premium plan worth it over the free 200 credits?

The free tier's 200 credits work out to roughly 10-20 generations a month, which is enough to evaluate the tool or handle the occasional component, but it disappears fast once you're iterating — remember, each refinement prompt costs credits too. If you're using v0 regularly for real project work, Premium at $20/mo pays for itself the first week just in time saved not hand-coding forms and cards. The $200/mo Team plan only makes sense once you've got multiple developers generating components regularly and want shared usage and billing — for a solo developer or small side project, it's overkill.

Pricing