v0 is Vercel’s new generative UI tool. As of now (November 2023) it’s still in private beta but you can get access by joining the waitlist. It works by generating UIs based on text prompts you submit. If you want to generate a user profile, type user profile into the input and it’ll generate a few options based on that prompt.

What v0 supports

• quickly iterating on initial UIs using prompts
• creating skeletons that use React, Tailwind CSS, and Shadcn UI (I’ll create a post on Shadcn UI soon, it’s quickly becoming a favorite of mine)
• generating initial code to use as a starting point that’s easy to modify and extend

What v0 doesn’t support

• custom design systems
• libraries besides React
• styling systems besides Tailwind CSS
• adding interactions to the UI elements it produces

These supported features will no doubt change as they further develop the product.

v0 is the perfect name for the tool. It makes getting an initial skeleton version of a page or component up and running, cutting down on lots of the boilerplate it takes to build some momentum within a project. You won’t always get a polished and production-ready output. This type of tooling is also useful as a brainstorm tool for designers. If I could have my ideal workflow as a designer/developer, it would be a tool similar to v0 but within Figma that I could then refine manually in Figma or through more prompts, that I could then export the code from in the style of v0.

Why Tailwind CSS and Shadcn UI work so well for v0

Tailwind CSS

Tailwind CSS is a utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup. The utility classes/directly in markup combo means it’s easy to move styles by simple copy-pasting. There aren’t seperate css files with project-specific naming conventions to worry about. Tailwind CSS works essintially the same across all projects (there are some configuarations/additions you can make but for the most part it’s implemented similarly) so if you use Tailwind, taking code from v0 and adding it to your project is a breeze.

I’m sure in the future they plan on creating a way for v0 to output code based on your project’s naming and component conventions but that’s non-trivial problem. In the meantime, building v0 to output Tailwind seems like a smart move to be usable by a wide range of projects.

Shadcn UI

v0 also assumes you’re using Shadcn UI, a collection of re-usable components built on top of Radix UI for accessible primatives, and Tailwind CSS to style those primatives. To use it, all you need to do is copy-paste the code into your projet, no package or dependency required. This makes it very customizable. Don’t like an executiong of a component, edit the component file with whatever styles or settings you want. You won’t be wrestling with Shadcn UIs apis/architeture because you can edit them to a way that fits your needs.

How to use v0

1. Enter the initial prompt on the home page. They provide some examples such as, “A centered user profile card with avatar, name, bio, and social links, and other helpful info inside. Each social link is an icon. Make it modern and bold.”

2. Once 3 UIs are generated, select your favorite. Then you can refine the UI by adding new prompts. You can prompt it to move elements to new places, remove elements, change colors, add elements, or anything else you can think of until you’re ha

3. There are a couple options for bringing the code into your project. You can simply copy paste the code where you want it, or you can use the CLI. To use the CLI, run npx v0@latest add [id] in your React project’s root directory.

Final thoughts

As I said above, it’s a great tool to get an initial version of a component or page up and running. It’s especially usefull for developers who don’t have strong knowledge of design tools like Figma.