Skip to main content
Every component on ui.shadcn.com can be opened and edited in v0 by Vercel, allowing you to customize components using natural language before adding them to your project.

​
What is v0?

v0 is an AI-powered generative UI tool by Vercel that lets you:
  • Generate UI with prompts - Describe what you want and v0 creates the code
  • Edit visually - Modify components in a live preview environment
  • Iterate quickly - Refine designs with natural language
  • Export clean code - Get production-ready React components

​
Using v0 with shadcn/ui

1

Browse components

Visit ui.shadcn.com/docs/components and find a component you want to customize.
2

Open in v0

Click the “Open in v0” button on any component page to launch the editor with that component pre-loaded.
3

Customize with prompts

Use natural language to modify the component:
Make the button larger with rounded corners
Change the color scheme to blue
Add an icon to the left of the text
Make it responsive for mobile screens
4

Copy the code

Once you’re happy with the customization, copy the generated code and paste it into your project.

​
Getting started with v0

To use v0, you’ll need a free Vercel account:

Sign up for Vercel

Create a free account to access v0 and Vercel’s deployment platform
In addition to v0, a Vercel account gives you:
  • Free hosting for your projects
  • Automatic deployments from Git
  • Preview deployments for pull requests
  • Edge functions and serverless APIs

​
Example workflows

​
Customizing a button

Start: Default shadcn/ui button component
Prompt: "Make it a gradient button with a subtle animation on hover"
Result: Customized button with gradient and animations

​
Building a form

Start: Form component from shadcn/ui
Prompt: "Add validation, error messages, and a loading state"
Result: Complete form with all requested features

​
Creating a dashboard

Start: Card component
Prompt: "Turn this into a dashboard card with a chart, stats, and action buttons"
Result: Feature-rich dashboard component

​
Benefits

Faster iteration

Test design changes instantly without manual coding

AI assistance

Get suggestions and improvements from AI

Learn patterns

See how different UI patterns are implemented

Production ready

Export clean, type-safe React code

​
Best practices

Use existing shadcn/ui components as a foundation. They’re already accessible, well-tested, and follow best practices.
Detailed prompts get better results. Instead of “make it better,” try “increase padding by 4px and add a subtle shadow.”
Make changes incrementally. It’s easier to refine than to completely rewrite.
Always review the generated code before adding it to your project. Ensure it meets your standards and requirements.

​
Learn more

v0 Documentation

Learn more about v0’s features and capabilities

Vercel Documentation

Get started with Vercel’s platform

Component Library

Browse all available shadcn/ui components

Examples

See pre-built blocks and templates

Build docs developers (and LLMs) love

Get started for freeTalk to us