Difficulty: Beginner · Last updated: January 16, 2027 · By Mantlr Editorial
A designer's practical guide to v0 by Vercel — what it does, what it can't do, and how it fits into the broader AI design tools ecosystem.
Key takeaways
Six things to know about v0 before adding it to your workflow:
1. v0 is Vercel's AI code generation tool — generates React + Tailwind + shadcn/ui components from natural language prompts
2. Launched in late 2023; rebranded from v0.dev to v0.app in January 2026; matured into full-stack app builder
3. By 2026, used by 6 million+ developers — the most adopted AI UI tool in the category
4. Best for: frontend components, marketing pages, and shadcn/ui ecosystem work
5. Pricing starts free; Pro tier around $20/month with credit-based usage
6. v0 is engineer-first by default — designers benefit most when paired with Cursor or used as a component scaffolding tool
On this page
- What is v0?
- How is v0 different from Figma Make and Lovable?
- What can v0 actually do today?
- What can't v0 do (and what to use instead)?
- Who is v0 for?
- How does v0 work with Figma designs?
- How does v0 pricing work?
- Common mistakes designers make with v0
- What to do in your first 30 minutes with v0
- Frequently asked questions
- Related articles
If you've spent any time in design or developer Twitter in the past two years, you've seen v0. Launched in late 2023 by Vercel, v0 was one of the first prompt-to-component tools to reach mainstream attention. Type a description; get clean React code with shadcn/ui components. The output was good enough to drop into production codebases. Engineers loved it. Designers were curious but cautious.
In 2026, v0 grew into something bigger. The product rebranded from v0.dev to v0.app in January 2026. The feature set expanded from component generation to full-stack app building with Next.js sandbox, Supabase integration, and one-click Vercel deployment. By mid-2026, Vercel reported 6 million+ developers using the tool — making it the most adopted AI UI builder in the category.
This guide is the designer-first explanation of v0. What it is, what it does well, where it falls short, and how it fits alongside Figma Make and Lovable in a real design workflow. Written for designers, design engineers, and PMs trying to figure out whether v0 belongs in their toolkit.
If you're new to AI design tools entirely, read The Complete Guide to Free Design Resources and AI Tools in 2026 first for the broader landscape.
Quick wins
1. v0 is at v0.app — go there and try a prompt. The first one is free with no signup.
2. v0 outputs shadcn/ui components by default. If your stack uses shadcn, the code drops cleanly into your codebase.
3. Pair v0 with Cursor — generate in v0, refine in Cursor for the best designer-first AI coding workflow.
What is v0?
v0 is Vercel's AI-powered UI and app builder. You describe what you want in natural language, and v0 generates working React components or full-stack web applications. The output uses Tailwind CSS for styling and shadcn/ui as the default component library.
The defining feature: production-quality code output. Where some AI UI tools produce code that looks good but is hard to maintain, v0's output is consistently clean enough to drop into real codebases. Components follow React best practices, include accessibility patterns, are responsive by default, and use libraries professional teams actually ship with.
v0 lives at v0.app (formerly v0.dev). The interface is chat-based: you type a prompt, v0 streams the generated UI in real-time, and you can iterate through conversation. The platform also includes:
- A built-in code editor for direct edits
- A live browser preview for testing interactions
- A Next.js full-stack sandbox (added 2026) for complete applications
- Native Supabase integration for backend functionality
- One-click deployment to Vercel hosting
- GitHub integration for syncing generated code to repositories
The tool is built on Vercel's broader infrastructure. Generated apps inherit Vercel's edge network, automatic HTTPS, preview deployments, and serverless functions by default. For teams already on Vercel, the integration is seamless.
How is v0 different from Figma Make and Lovable?
This is the question that confuses most designers in their first week evaluating AI tools.
Figma Make is Figma's prompt-to-app tool, built into the Figma product family. Best for designer-led workflows starting from existing Figma designs. Strong design system integration (with Make kits). Cloud-only sandbox. Supabase-only backend. Published to *.figma.site URLs.
Lovable is an independent full-stack app builder. Best for non-technical founders and designers building complete apps from natural language. Stronger backend functionality than v0. Visual edits mode for designer-friendly tweaking. GitHub integration native.
v0 is Vercel's developer-leaning UI and app builder. Best for engineer-led teams building on the shadcn/ui + Next.js + Vercel stack. Strongest at component generation. Code-first interface. Tightest integration with Vercel deployment.
The framing that helps: Figma Make is the design tool that crossed into prompt-to-app. Lovable is the full-stack app builder for non-technical users. v0 is the developer prototyping tool that grew into a full-stack builder. They overlap but serve different primary users.
For deeper comparisons, see Figma Make vs v0 and v0 vs Lovable.
What can v0 actually do today?
Specific capabilities as of January 2027:
Generate React + shadcn/ui components from prompts
The core use case. Type "a pricing card component with three tiers, a comparison table, and a CTA button" and v0 generates clean shadcn/ui code. The output is consistently production-quality — copy it into your codebase, customize as needed.
Generate full Next.js applications
The 2026 expansion. Type "a project management tool with a dashboard, task list, and settings page" and v0 generates a multi-page Next.js app with routing, shared layouts, and navigation. The full-stack sandbox lets you test the application directly in v0.
Use Supabase for backend functionality
Integrated database, authentication, and storage via Supabase. Prompts like "add user authentication" or "add a database to store tasks" work the same way as in Figma Make and Lovable.
Stream generation in real-time
v0 generates UIs as you watch. Type a prompt, see the code stream in, watch the preview update. The streaming model makes iteration feel responsive — you spot issues early instead of waiting for completion.
Generate three variations per prompt
A 2024 feature that persists in 2026. v0 produces three distinct variations (v0-0, v0-1, v0-2) for each prompt by default. You pick the best starting point, then iterate from there.
Visual editing mode
Added in 2026. A point-and-click interface for adjusting colors, spacing, typography, and layout properties without writing code. Changes update the underlying code automatically. Designed for designers and non-technical team members.
One-click Vercel deployment
Click "Deploy" and v0 generates a Vercel deployment automatically. Real URL, real hosting, real production-grade infrastructure.
Native GitHub integration
Generated code can sync directly to a Git repository. You can clone locally, edit in your IDE, push back to v0. The Git workflow is more mature than Figma Make's cloud-only sandbox.
Database connections
The January 2026 rebrand added direct database connections for platforms like Snowflake and AWS. Useful for connecting v0 apps to existing enterprise data sources.
What can't v0 do (and what to use instead)?
The honest list. Most v0 coverage skips this.
It can't read Figma files natively
v0 doesn't have built-in Figma integration like Make does. You can attach screenshots of Figma designs, but the structured Figma data input (components, layout, tokens) isn't available. For Figma-first workflows, v0 is weaker than Make.
Use instead: Figma Make for design-to-app workflows starting from Figma files. Or use Figma MCP with Cursor to get Figma context into a code-first workflow.
It can't easily match custom design systems
v0's default output uses shadcn/ui. If your team uses shadcn, the output integrates cleanly. If you use a custom design system, v0 produces components that approximate your brand but don't match exactly. You'd need to refactor to use your real components.
Use instead: Figma Make with Make kits for exact design system fidelity. Or use Cursor with your design system docs and Figma MCP.
It's engineer-first by default
The interface assumes comfort with code, GitHub workflows, and Next.js patterns. Many designers find v0 less approachable than Figma Make or Lovable. The Visual Editing mode helps but doesn't fully bridge the gap.
Use instead: Lovable for non-technical or designer-friendly app building. Or Figma Make for design-first workflows.
It's locked into the React ecosystem
v0 produces React + Tailwind + shadcn output. If you're building in Vue, Svelte, or any non-React framework, v0 doesn't fit. The output won't translate.
Use instead: Tool selection depends on your stack. Most teams not on React eventually settle on Cursor or Claude Code for code generation flexibility.
It can't replace product judgment
v0 builds what you describe. It doesn't tell you whether what you're describing is the right thing to build. Users still have to do the product thinking — which is true for all AI tools but worth restating.
Credit-based usage can be unpredictable
v0's credit pricing can consume credits faster than expected for complex iterations. Heavy users sometimes hit limits mid-project. Track usage and consider Pro tier early if you'll use v0 regularly.
Who is v0 for?
Three audiences get the most value from v0:
Frontend engineers in the shadcn ecosystem. This is v0's core audience. If you're building Next.js apps with shadcn/ui and Tailwind, v0's output integrates with your existing patterns better than any other AI tool. Component generation in v0 is faster than building from scratch.
Design engineers bridging design and code. Designers comfortable with React who want to scaffold components quickly. v0 generates the structural skeleton; the design engineer adds polish and integrates into the codebase. Pairs particularly well with Cursor for refinement.
Marketing teams building landing pages. v0 excels at marketing UI — hero sections, pricing tables, feature grids, testimonials. The output is consistently polished enough for production marketing sites. Marketing engineers and design-savvy marketers use v0 to ship landing pages without traditional design-dev handoffs.
v0 is less useful for: designer-led workflows starting from Figma (use Make), non-technical founders building full apps (use Lovable), teams on non-React stacks (use Cursor or Claude Code), or projects requiring exact custom design system fidelity (use Make kits in Figma Make).
How does v0 work with Figma designs?
A common workflow question. v0 doesn't read Figma files directly, but designers still use Figma + v0 together in three patterns:
Pattern 1: Screenshot-based prompting. Designers capture screenshots of Figma frames and attach them to v0 prompts as visual reference. Works for general style direction. Loses precision because v0 can't extract exact values from images.
Pattern 2: Design-then-prompt. Designers complete designs in Figma, then write detailed v0 prompts describing the design (colors, spacing, components, layout). v0 generates code that approximates the design. Iteration brings it closer.
Pattern 3: Figma MCP via Cursor. The advanced workflow. Use Figma MCP server with Cursor to give Cursor structured Figma context. Then use Cursor (which has stronger Figma awareness via MCP) instead of v0 for the actual code generation. Best for production-quality output that matches Figma exactly.
For most designer + v0 workflows, Pattern 2 (design-then-prompt) is the practical default. Pattern 3 is the higher-fidelity option for teams willing to invest in MCP setup.
How does v0 pricing work?
v0 uses a credit-based pricing model. As of 2026:
Free tier: Limited generations per day. Enough to evaluate v0 and try small projects. Not enough for serious work.
Pro tier ($20/month): Significantly higher credit allowance. Most individual users and small teams use this tier. Includes premium features like higher generation quality, deployment integrations, and Git workflow features.
Team tier: Per-seat pricing with team management features, shared credits, and admin controls. For agencies and design-engineering teams building multiple projects.
Enterprise: Custom pricing for organizations needing security controls, SSO, training opt-out, and dedicated support.
Credit consumption varies by operation. Simple component generation uses fewer credits than full-stack app generation. Heavy iteration on a single project can burn through Pro tier credits faster than expected.
For teams already on Vercel paid plans, v0 access is bundled into the Vercel account. If you're not on Vercel, v0 is a standalone subscription with its own billing.
Common mistakes designers make with v0
After watching designers learn v0, five mistakes show up most often:
Mistake 1: Treating v0 like Figma Make. v0 is engineer-first. The interface assumes code comfort. Designers who expect Figma Make's design-first UX find v0 frustrating until they adjust expectations.
Mistake 2: Ignoring shadcn/ui ecosystem fit. v0 outputs shadcn components by default. If your project uses a different design system, you'll fight v0's defaults. Either commit to shadcn or pick a different tool.
Mistake 3: Vague prompts. Like all AI tools, v0 produces better output with specific prompts. "Build a SaaS pricing page" gives you a generic SaaS page. "Build a SaaS pricing page with three tiers — Free, Pro at $29/month, Enterprise — using shadcn cards with hover effects" gives you something usable.
Mistake 4: Not using the three variations. v0 generates three variations per prompt by default. Many designers ignore this and just edit the first one. The variations often reveal layout possibilities you didn't consider.
Mistake 5: Trying to fit v0 into a Figma-first workflow without MCP. v0 doesn't read Figma files. If you're starting from existing Figma designs, you're working against v0's defaults. Either use Make (Figma-native) or set up Figma MCP through Cursor for code generation.
Get the next article in your inbox
Mantlr publishes one practical, no-fluff article like this every Saturday. Free design resources, evaluation guides, and editorial takes on what's worth using.
Subscribe to Mantlr Editorial →
5,400+ designers and founders. No spam. Unsubscribe anytime.
What to do in your first 30 minutes with v0
If you're new to v0, here's how to spend the first half hour productively:
Minutes 0–5: Go to v0.app. Sign up with your Vercel account, GitHub, or email. No credit card required for the free tier.
Minutes 5–15: Type a focused first prompt. Try something specific — "Create a pricing card component with three tiers: Free with limited features, Pro at $29/month with all features, and Team at $99/month with collaboration. Use shadcn cards with subtle hover effects and a primary CTA button on each tier."
Minutes 15–20: Review the three variations v0 generates. Pick the one closest to what you wanted. Note what you'd change.
Minutes 20–25: Iterate with focused follow-ups. "Make the middle tier (Pro) visually emphasized with a 'Most Popular' badge." "Increase the spacing between cards." "Add a monthly/annual toggle above the cards."
Minutes 25–30: Try the Visual Editing mode to tweak colors and spacing without writing prompts. Then deploy to a preview URL to see it live.
By the end of 30 minutes, you'll know whether v0 fits your workflow and what kinds of prompts produce the best results for your style.
Frequently asked questions
What is v0?
v0 is an AI-powered code generation tool built by Vercel. It generates React + Tailwind components and full Next.js applications from natural language prompts. The output uses shadcn/ui components by default and integrates with Vercel deployment. Launched in late 2023, by 2026 it grew to 6 million+ users.
Is v0 free?
v0 has a free tier with limited generations per day — enough to evaluate and try small projects. Pro tier starts around $20/month with higher credit allowances. Most individual users and small teams use the Pro tier for serious work.
What's the difference between v0 and v0.dev?
Same tool. v0 rebranded from v0.dev to v0.app in January 2026. The functionality continued and expanded — full-stack Next.js sandbox, Supabase integration, deployment improvements. v0.dev URLs typically redirect to v0.app now.
Can v0 read Figma files?
Not natively. v0 doesn't have built-in Figma integration. You can attach screenshots of Figma designs as visual reference, but the structured Figma data input that Figma Make supports isn't available in v0. For Figma-first workflows, Make is the better choice; for v0 with Figma context, Figma MCP via Cursor is the advanced path.
Is v0 good for designers?
Yes, but with caveats. v0 is engineer-first by default — the interface assumes code comfort. Designers comfortable with React (or design engineers) get more value from v0 than designers who don't read code. Visual Editing mode helps but doesn't fully replace code awareness.
What's v0 vs Lovable vs Cursor?
v0 is Vercel's UI/app builder, best for shadcn + Next.js + Vercel teams. Lovable is an independent full-stack builder, best for non-technical founders and designer-friendly app building. Cursor is an AI code editor (VS Code fork), best for developers working in existing codebases. They overlap in features but target different primary users.
Can I deploy v0 apps to production?
Yes. v0's one-click Vercel deployment produces production-grade hosting with custom domains, automatic HTTPS, edge network, and serverless functions. The generated code can also be exported to GitHub and deployed anywhere — though v0's native integration is tightest with Vercel.
Does v0 work with my existing design system?
Only if your design system is shadcn/ui or similar. v0's default output uses shadcn components. For other design systems, v0 produces approximations that need refactoring. For exact design system fidelity, Figma Make with Make kits is the stronger choice.
Is v0 going to replace designers?
No. v0 (and other AI tools) accelerate execution but don't replace product judgment, design strategy, brand thinking, or user research. Designers using v0 effectively ship faster — they don't get replaced by it.
Where can I learn more about AI design tools?
Mantlr publishes evaluation guides and comparisons of the AI design tools landscape. See What Is Lovable?, Cursor for Designers, and How to Choose Between v0, Lovable, Cursor, and Figma Make.
Build with Mantlr's curated library
You understand what v0 is and where it fits. The next step is using it well — and finding the design resources that complement the workflow.
Mantlr lists 521 designer-vetted free design resources across 43 categories — every one license-verified, production-tested, free of email walls.
Browse Mantlr → · Subscribe to weekly editorial →
Related articles
If you're evaluating AI design tools, these articles cover the connected ecosystem:
- What Is Lovable? — The full-stack alternative for non-technical builders.
- Cursor for Designers — The AI code editor designers are increasingly using.
- How to Use v0 — Step-by-step workflow for designers new to v0.
- v0 vs Lovable — Direct comparison with the full-stack alternative.
- The Complete Guide to Free Design Resources and AI Tools in 2026 — Mantlr's pillar guide to the full resource library.
About Mantlr Editorial
Mantlr is a free directory of designer-vetted, license-verified design resources. We test every resource before listing. No email walls. No paid placements. No affiliate dressing.
This article was written by Mantlr Editorial, the team behind a curated library of 521 free design resources. We work in production design daily and only recommend resources we'd use ourselves.
Last updated: January 16, 2027. Article reviewed quarterly for accuracy.