Week 9 of my “I Used It for a Week” series. Last week I tried Bolt.new for full-stack app generation. This week: Vercel’s take on the same idea, but scoped to UI components.
v0 is Vercel’s AI-powered UI generator. You describe a component in plain English, and it generates production-ready React code with Tailwind CSS and shadcn/ui. The demos look magical — but does it hold up when you’re building real interfaces?
I used it exclusively for all my frontend work for a week.
How It Works
You go to v0.dev, type a prompt like “a pricing page with three tiers, toggle between monthly and annual billing, dark mode,” and v0 generates a complete React component. You can iterate on it with follow-up prompts, then copy the code or deploy it directly.
It uses shadcn/ui components under the hood, which means the output is clean, accessible, and customizable — not some proprietary component library you’re locked into.
Day 1: Landing Pages
I needed a landing page for a side project. Prompt: “A SaaS landing page with hero section, feature grid with icons, testimonials carousel, and pricing table. Dark theme, modern, minimal.”
v0 generated the entire page in about 15 seconds. And it looked… genuinely good. Not “good for AI” — actually good. The layout was balanced, the spacing was right, the component hierarchy made sense.
I made three follow-up tweaks (“make the hero taller,” “add a gradient to the CTA button,” “swap the testimonials for a logo cloud”) and had a production-ready landing page in under 10 minutes.
This would’ve taken me 2-3 hours to build from scratch, even with a component library.
Day 2-3: Complex Components
I pushed harder. “A data table with sortable columns, pagination, row selection, bulk actions toolbar, and a search filter. Should handle 1000+ rows.”
v0 generated a solid implementation using shadcn’s data table primitives. Sorting worked, pagination worked, search worked. But the bulk actions had a bug — selecting rows on page 2 would deselect when you went back to page 1. Classic state management issue.
I described the bug in a follow-up prompt, and v0 fixed it by lifting the selection state above the pagination. Took one iteration.
What Blew Me Away
Design quality
This is v0’s superpower. The components don’t just work — they look professional. Spacing, typography, color usage, hover states — it gets the design details right in a way that most developers (myself included) struggle with.
Iteration speed
The chat-based iteration is incredibly fast. “Make the sidebar collapsible.” “Add a loading skeleton.” “Make it responsive.” Each prompt takes 10-15 seconds and the changes are exactly what you’d expect.
Accessibility
v0 generates accessible markup by default. Proper ARIA labels, keyboard navigation, focus management, semantic HTML. This alone makes it worth using — most hand-written components miss at least some of these.
shadcn/ui foundation
Because it uses shadcn/ui, the generated code is just regular React components with Tailwind classes. No vendor lock-in, no magic wrappers. You can eject and customize everything.
What Frustrated Me
It’s a starting point, not a finish line
v0 gets you 80% of the way there fast. But that last 20% — matching your exact design system, handling edge cases, integrating with your state management — still requires manual work. It’s a scaffolding tool, not a replacement for frontend development.
Complex state logic
For components with complex state (multi-step forms, drag-and-drop, real-time updates), v0 generates something that works for the demo case but breaks on edge cases. You’ll need to refactor the state management for production use.
Prompt engineering matters
Vague prompts get vague results. “Make a dashboard” gives you something generic. “A dashboard with a sidebar nav, top bar with user avatar and notifications, main content area with a 2x2 grid of chart cards, and a recent activity feed below” gives you something useful. You need to think like a designer when prompting.
Limited to React + Tailwind
If you’re using Vue, Svelte, or plain CSS, v0 isn’t for you. It’s deeply tied to the React + Tailwind + shadcn/ui stack. Great if that’s your stack, irrelevant if it’s not.
v0 vs Bolt.new vs ChatGPT
- v0: Best for individual components and pages. Highest design quality. React + Tailwind only.
- Bolt.new: Best for full-stack apps from scratch. Lower design quality but more complete.
- ChatGPT: Best for explaining code and generating logic. Worst at visual design.
The Workflow That Actually Works
After a week of experimenting, I found the workflow that gets the most out of v0:
-
Start with a screenshot or description. v0 handles both. If you have a design in Figma, screenshot it and paste it in. If you don’t, describe what you want in detail — “a pricing page with three tiers, a toggle for monthly/annual, and a highlighted ‘popular’ tier.”
-
Iterate in v0, not in your editor. The temptation is to export after the first generation and fix things in VS Code. Don’t. v0’s follow-up prompts are surprisingly good at refinement. “Make the cards more compact,” “add a dark mode variant,” “make it responsive” — these all work well.
-
Export when it’s 80% right. You’ll always need to adjust spacing, colors, and edge cases. But starting from 80% instead of 0% saves hours.
-
Keep a component library. I started saving my best v0 generations as a personal library. A pricing page, a dashboard layout, a settings form, a data table. Now when I need something similar, I start from a proven base instead of from scratch.
The developers getting the most value from v0 aren’t the ones using it for every component. They’re the ones using it strategically for the layouts and patterns that eat the most time.
The Honest Verdict
v0 is the best AI tool for frontend developers right now. Not because it replaces you — but because it eliminates the most tedious part of frontend work: going from “I know what this should look like” to “I have working code.”
Best use cases:
- Landing pages and marketing sites — this is v0’s sweet spot
- Admin dashboards — tables, forms, charts, sidebars
- Component prototyping — test ideas before building them properly
- Design system bootstrapping — generate a base set of components to customize
Worst use cases:
- Complex interactive apps — games, editors, real-time collaboration
- Non-React projects — no Vue/Svelte/Angular support
- Pixel-perfect brand implementations — it gets close but not exact
Would I Keep Paying?
The free tier is generous enough for occasional use. The Pro plan ($20/month) is worth it if you’re building UIs regularly — it pays for itself the first time you skip 3 hours of layout work.
Rating: 8/10 — The fastest way to go from idea to working UI. Just know its limits.
Next week: I Used Replit Agent for a Week — the last stop in this series. Full apps from prompts, but with real deployment and real infrastructure.
FAQ
Is v0 worth it?
The free tier is generous for occasional use. The Pro plan at $20/month pays for itself the first time you skip 3 hours of layout work — it’s the fastest way to go from a design idea to working React code. If you build UIs regularly with React and Tailwind, it’s an easy yes.
Can v0 build full apps?
v0 generates complete pages and complex components (dashboards, data tables, landing pages), but it’s focused on the frontend — there’s no backend, database, or API generation. For full-stack apps from a single prompt, Bolt.new or Replit Agent are better choices. v0 excels at the UI layer specifically.
Is v0 better than Bolt?
v0 produces higher-quality UI designs with better spacing, typography, and accessibility out of the box. Bolt.new builds complete full-stack apps with backend and database. Choose v0 when design quality matters and you only need frontend components; choose Bolt when you need a working full-stack prototype fast.
Related: AI Coding Tools Pricing