v0 by Vercel Tutorial for Beginners: Build UI Components with AI

By Kevin Amayi · May 13, 2026 · 9 min read

A client needed a pricing section before an investor demo. Three tiers, feature comparison table, highlighted recommended plan — the standard pattern you’ve seen on a hundred SaaS landing pages. I used v0 by Vercel to generate the initial component, iterated with two follow-up prompts, cleaned up the TypeScript props, and swapped placeholder copy for real content. Twenty-three minutes. Without v0, that’s ninety minutes minimum, possibly more depending on how opinionated I was feeling about the layout.

That’s what v0 does when it works: it converts a plain-English description into a working React component faster than writing from scratch. Whether it fits your workflow depends on your stack, your skill level, and what you’re building.

This tutorial covers what v0 by Vercel is, how to start using it, how to write prompts that produce usable output, how to drop the components into an existing project, and — just as important — when you should skip it entirely and write the component yourself.

What Is v0 by Vercel?

v0 (available at v0.dev) is a generative UI tool from Vercel. You type a description of the component you want. v0 generates React/JSX code using shadcn/ui components and Tailwind CSS classes. It renders a live preview alongside the code so you can see the result before copying anything.

It is not a full IDE. It is not a replacement for Cursor or Windsurf. It does one job: take a prompt and produce a component. For that specific job, it’s fast.

A few things that separate v0 from a generic AI coding assistant:

• Opinionated output. v0 generates shadcn/ui code built on Radix UI primitives with Tailwind. If your stack matches, that’s a benefit. If it doesn’t, you’ll spend more time converting the output than writing the component from scratch.
• Iterative conversation. Follow-up prompts refine the existing component rather than starting over. “Move the button to the bottom right” adjusts what’s there. You don’t lose progress.
• Visual preview. The rendered component appears in the interface. You check the layout before you copy a single line.
• CLI export. Vercel provides a shadcn CLI command that pulls the component directly into your project’s component directory.

Here’s how v0 sits relative to two tools you’ve probably already heard of:

The absence of codebase context is the important one. v0 doesn’t know your existing component library, your TypeScript types, or your naming conventions. What it generates is structurally correct but context-blind. That gap is your job to close before shipping anything.

Getting Started with v0.dev

You need a Vercel account. If you don’t have one, create it at vercel.com — free tier is fine. Once you have an account, go to v0.dev and sign in.

The interface is minimal: a text input at the bottom, a preview panel on the right, and a code view you can toggle. When you submit a prompt, v0 generates the component and renders it. Multiple variations sometimes appear — you can compare them before picking one.

Here’s the basic workflow for a first session:

1. Go to v0.dev and sign in with your Vercel account.
2. Type a prompt describing the component you want. Specific prompts produce usable output. Vague prompts produce generic placeholders (more on this in the next section).
3. Review the preview first. Check that the layout matches what you described before looking at the code.
4. Read the code. Not skim — read. Check for placeholder data, missing handlers, and prop types that don’t match your data model.
5. Iterate with follow-up prompts. You don’t need to restart for each change. “Add a loading state to the submit button” applies cleanly to the existing component.
6. Export the component using the CLI command v0 provides, or copy the code directly into a new file.

The CLI command looks like this:

npx shadcn@latest add "https://v0.dev/chat/abc123"

That installs the component into your project’s components/ directory and resolves shadcn/ui dependencies automatically. Your project needs shadcn/ui initialized first. If it isn’t:

npx shadcn@latest init

Run that once per project. It sets up the component directory, Tailwind configuration, and the base shadcn/ui dependencies.

Writing Prompts That Get Useful Output

Most bad v0 output starts with a vague prompt. “Make a dashboard” produces something generic. “Make a sidebar navigation with 5 links, icons from Lucide, an active state indicator, and a collapsed state toggle” produces something you can actually ship.

The patterns that consistently work:

Describe layout explicitly. “Three-column grid on desktop, single column on mobile” gives v0 specific instructions. “A responsive card grid” leaves too much to interpretation. Name the columns, name the breakpoints if it matters.

State the component’s purpose. “A pricing table for a SaaS app with three tiers — Starter, Pro, Enterprise — a monthly/annual billing toggle, and a highlighted recommended plan” gives the model enough information to make reasonable decisions about typography, spacing, and call-to-action placement. It will produce something closer to what you’d build yourself.

Reference shadcn components by name. v0 knows the shadcn/ui library well. “Use a Dialog component for the confirmation modal” gets you a Radix UI Dialog with proper focus management. “A popup” might get you a div with position: fixed and no keyboard accessibility.

Use follow-up prompts instead of rewrites. After the first generation, adjust with targeted instructions: “Change the background to slate-900”, “Replace the text button with a ghost variant”, “Make the card border visible on hover”. Each follow-up preserves the structure and applies the change without discarding what’s already working.

One habit worth building: after v0 generates a component, read the full output before copying it. Components sometimes include placeholder data structures or event handlers that reference functions that don’t exist yet. These are obvious once you read the code. Easy to miss if you’re in copy-paste mode. (I say “read” — I mean actually read it, not scroll past it at 800 words per minute.)

Adding v0 Components to Your Project

Two methods. The CLI is cleaner. Copy-paste works but creates more room for dependency errors.

Method 1: CLI (recommended)

If your project already uses shadcn/ui, run the command v0 displays in the interface:

npx shadcn@latest add "https://v0.dev/chat/abc123"

This places the component file in your components/ directory, installs any shadcn/ui packages the component depends on, and formats the file according to your project’s shadcn configuration. One command, no manual dependency hunting.

Prerequisite: your project must have shadcn/ui set up. If it doesn’t, npx shadcn@latest init handles that. It asks a few questions about your project structure, then creates the configuration file and installs the base packages.

Method 2: Copy-paste

Copy the generated code from the v0 interface and paste it into a new file in your project. v0 includes a comment block at the top listing the packages required. Install them manually:

npm install @radix-ui/react-dialog lucide-react

This method works, but shadcn/ui version mismatches cause subtle problems. The CLI method handles version alignment automatically.

After installing the component

• Replace placeholder content with real data. v0 uses lorem ipsum text and placeholder numbers.
• Check TypeScript types. v0 generates valid TypeScript, but its prop types are generic. Your actual data model likely has different shapes — update the interfaces.
• Test at multiple viewport sizes. v0 generates responsive layouts, but they’re based on assumptions from the prompt. Your content may wrap differently than expected.
• Check colors and spacing in context. If you’ve customized your Tailwind config — extended the color palette, changed spacing scale, added custom fonts — the component may use the defaults instead of your theme. Adjust accordingly.

If you’re also using Bolt.new for scaffolding full applications, the approach is similar — see the Bolt.new tutorial for developers for how that integration workflow differs. For adding AI-generated components into a more established codebase, the Cursor AI tutorial covers how to use codebase context to keep changes consistent.

v0 Pricing: Free Tier and What You Actually Get

v0 has a free tier. What’s included changes as Vercel adjusts the product, so check v0.dev/pricing for current numbers rather than trusting whatever a blog post says. That includes this one.

The general shape of the tiers:

The free tier is enough to decide whether v0 belongs in your workflow. Spend an afternoon with it on a real component you need to build. If you hit the limit before you’ve got a useful answer, that tells you something about usage pattern before you pay anything.

Vercel also bundles v0 access into its hosting subscription plans. If your projects already deploy to Vercel Pro, check whether your existing plan includes v0 credits before paying separately.

Vibe Coding Has a Cost

Here’s a position worth stating directly: v0 is a tool for moving faster. It is not a substitute for understanding what you’re building.

Shipping code you don’t understand because the AI generated it is technical debt with a timer on it. v0 components use shadcn/ui, which is built on Radix UI primitives. If you don’t know what a Radix Portal does, you won’t understand why your dropdown is rendering in an unexpected position inside a stacked modal context. You’ll spend 40 minutes on it and call it a “weird UI bug” instead of reading one page of documentation.

This isn’t a criticism of v0. The output is generally well-structured and consistent. The problem is a workflow: copy-pasting generated code without reading it creates components that work until the moment they don’t, at which point the developer who shipped them has nothing to go on.

The developers who get the most out of AI generation tools are the ones who treat the output as a first draft. They read the component, understand the structure, adjust what needs adjusting, and then ship it. The ones who get the least are the ones who measure success by how fast they can click past the preview and hit copy.

v0 generates components in the 80–150 line range for typical UI patterns. If you can’t read 80 lines of JSX and explain what each block does, you’re not in a position to maintain what you’re deploying. The tool is designed to help experienced React developers move faster — not to replace that experience.

When NOT to Use v0

v0 is not always the right choice. Here are five situations where it will create more work than it saves.

Your design system isn’t built on shadcn/ui. v0 generates shadcn/ui and Tailwind by default. If your team uses Material UI, Chakra, Ant Design, or a custom in-house component library, the output won’t integrate without conversion. That conversion takes longer than writing the component natively in most cases. Skip v0 and write it in your actual stack.

You need complex, multi-step state logic. v0 handles static layouts and basic single-step interactions reliably. Multi-step forms with conditional validation, drag-and-drop interfaces with external state management, real-time data subscriptions — these are outside what v0 produces well. You’ll get a component that renders correctly but behaves incorrectly once you wire up the logic.

Your project uses a non-React framework. v0 generates React/JSX. If your frontend is Vue, Svelte, Astro with island architecture, or any non-React stack, the output isn’t usable without significant manual rewriting. The component structure, lifecycle model, and templating syntax are all React-specific.

You’re learning React for the first time. If you can’t yet explain what useState does, what a prop is, or how a component tree renders, copying v0 output builds bad habits. You’ll ship components you can’t debug, read, or extend. Learn the fundamentals first — there are solid tutorials for AI-assisted React development once you have that foundation. Use v0 once you can evaluate what it’s giving you.

Your accessibility requirements are strict and non-negotiable. shadcn/ui components include reasonable ARIA attributes, but they don’t cover every accessibility scenario. Screen reader edge cases, complex keyboard navigation patterns, focus management in custom workflows — these need human review regardless of what tool generated the component. v0 is not an accessibility auditor, and treating its output as fully accessible without review is a mistake.

Conclusion

Back to the pricing section that took 23 minutes. It shipped. The investor demo went well. The client asked for two copy changes the next morning, which took four minutes to apply because the component was readable and the structure was clean.

That’s the useful version of this tool — not magic, not a shortcut past understanding React, not something you deploy without reading. A component generator that does the repetitive structural work so you can focus on the parts that require judgment.

Key takeaways:

• v0 generates React components using shadcn/ui and Tailwind CSS from text prompts
• Specific, layout-explicit prompts produce usable output; vague prompts produce generics
• CLI install via npx shadcn@latest add "[url]" is cleaner than copy-paste
• Read the full component output before shipping — always
• Skip v0 if your stack doesn’t use shadcn/ui, if you need complex state logic, or if you’re still learning React fundamentals
• Check v0.dev/pricing for current tier limits — they change

One last observation: v0 will occasionally generate a component that’s exactly right on the first prompt, with no follow-up needed. When that happens you’ll feel something between relief and mild suspicion. Both are appropriate. Check the TypeScript types anyway.

Frequently Asked Questions