v0 is an AI-powered, generative user interface system based on Tailwind CSS and shadcn/ui. One could describe it as Midjourney for creating user interfaces. It generates complete React components based on prompts entered by the user. These components can be integrated into existing projects either via a dedicated CLI or by copying and pasting.
To get started with v0, simply head to https://v0.dev/ and enter whatever you want to generate. To generate a contact form, you could enter following prompt:
A contact form with fields for the name, birthday and email address
Once v0 is done processing the request, it will show three options to choose from. The three options for this particular prompt were quite similar. In this case, the first option, which is shown in the screenshot above, is chosen. The first draft of the contact form already looks very good. It even added a date input for the birthday field, which is a very nice detail. However, what if the inputs should be placed below each other? One could argue, that this change can easily be made by modifying the generated source code, and they would be correct. For the purposes of this demo, let’s let v0 do the work by prompting the following:
Name, birthday and email should all be placed in an individual row
Once the component is ready, it can be added to existing projects using the v0 CLI or by copying and pasting. Both the source code and the CLI can be revealed by clicking the Code button in the top right corner. If you decide to use the CLI to add a component to a project, shadcn/ui has to be added first. Instructions for various frameworks can be found here. Once it is installed, the command to add the component, which will look something like npx v0 add <some-string>, can be executed. It will prompt for a name for the component, e.g. ContactForm for this example. Once a name is entered, v0 adds the component and all of the required components from shadcn/ui to the project. Now the only step left is to add the new component to a React app.
Voilà, the screenshot above shows the generated component embedded as part of a React project. Since it uses shadcn/ui, the styling looks identical to the preview on the v0 website.
Once a component is added to the project using v0, the entire source code is located in the project. As a result, the project team has full ownership of the component and can modify it at any time. This is one of the biggest upsides of using shadcn/ui (and therefore also v0). Adding a little bit more colour to the contact form is only a matter of adding the
bg-sky-500 class to the submit button.
Conclusion
The example component generated in this article (the individual steps and prompts can be seen at https://v0.dev/t/z8yjXKj538e) has shown, that v0 can generate usable components in a matter of a few prompts. Having full ownership of the generated components is a huge upside, even though this technically can be attributed to shadcn/ui and not v0 directly.
One potential downside of v0 is its pricing model. The free tier includes 200 credits per month. The premium tier, which is 20$ per month, includes 5000. Thus, using v0 to generate very basic components might simply not be worth the money.
Resources
Comments