Learn prompt engineering best practices for working with v0's core functionality to get the best results.

Link to headingWriting the right prompt

The more details you write, the better v0 can tailor its response to your needs:

• Include desired functionality of specific components

• Specify design preferences for every element

• Mention any libraries or frameworks you want to use

• Describe the context or use case for the component within the app you're working on

Don't hesitate to ask for modifications or improvements to the generated code or UI:

• Request specific changes or enhancements

• Ask for alternative implementations or generations

• Seek explanations for parts of the code you don't understand

• Use v0's suggestions to refine your ideas

Link to headingUnderstanding where v0 excels

v0's comprehensive chat interface guides users through building, debugging, and shipping web applications. While it's always learning and improving, it's helpful to know where v0 excels.

Link to headingUI generation

One of the standout features of v0 is its ability to generate high-quality React UIs using shadcn/ui components. But that’s just the beginning—v0 has top support for integrating with a wide range of third-party libraries to make your UI creations dynamic and versatile. v0 can also use component libraries from npm like Material UI.

"Create a SaaS pricing table but use Material UI React components where possible."

Link to headingThird-party library support

While v0 can technically use any library, it performs best with certain well-documented libraries, including:

• react-three-fiber for 3D graphics

• framer-motion for component animations

• lodash for utility functions

• react-confetti for interactive elements

• react-flow for flow diagrams

• react-bootstrap for UI foundations

If you're using a more obscure library, you may need to provide some guidance. For the most part, v0 handles incorporating npm packages in your code generations quite well. You can guide v0 by chatting in natural language or by sharing data and documentation in your Projects by adding files as a Source.

Link to headingFetching data from external sources

v0 can fetch data from external APIs, though you should be cautious about sharing sensitive information like API secrets. For instance, if a secret is sent through a message and used in production, it will store the secret client-side—creating a security vulnerability. This is best avoided for production applications.

Additionally, v0 can help you not only write the actual ISR code to fetch to your CMS, but can also help you come up with the technical integration strategy with your backend (AWS, AEM, Salesforce, etc.).

Link to headingFonts and styling

You can enable custom fonts in v0 by telling it to “import X font from Google Fonts”. Furthermore, you can tell v0 to adjust CSS properties to fine-tune the design, ensuring it matches your aesthetic vision.

If your initial designs don’t look right, ask v0 to change specific visual properties.

“Make the background color black, round the corners of elements, apply a light white border to the card components, and make all the buttons ghost.”

Using a tool like Coolors can also help generate cohesive color palettes to theme your UI generations effectively.

Link to heading3D graphics

v0 is great at generating 3D graphics, particularly with react-three-fiber. If v0 indicates that it can’t generate in 3D, simply append “using react-three-fiber” to your query for better results. This functionality to great for designers who don’t want to code or spend hours wiring up 3D elements in traditional design tools.

Learn more by reading our prompting guide for working with React Three Fiber in v0.

Link to headingIntegration with Next.js

Not only can v0 generate UIs, but it can also install them directly into an existing Next.js project via the CLI. You can even scaffold an entirely new Next.js project if you’re starting from scratch.

"Create a Next.js project template for a blog website using App Router."

Link to headingTechnical planning

v0 can provide technical planning support, to help support the ideation phase of engineering projects. For example v0 can generate migration plans, helping teams transition from monolithic architectures or different frameworks. It can also generate intricate architecture diagrams that visualize complex systems, making it easier for teams to understand and refine their designs.

"Create an architecture plan for splitting my codebase into microfrontends."

Link to headingFrontend development support

When it comes to code generation, v0 is able to create advanced React and Next.js features. Alongside the code generations, v0 excels at breaking down complex frontend tasks into manageable steps. Whether it’s creating RSCs or working with new React and Next.js features, v0 provides thorough explanations to guide you through the process.

It also supports frameworks like Svelte, Vue, and Remix, though with slightly less confidence compared to its expertise in React and Next.js.

Moreover, it supports code generation for other programming languages like Python and Rust, as well as writing SQL queries. While it is more proficient with JavaScript, it still offers step-by-step breakdowns for development tasks in these languages.

If you need to execute simple JavaScript snippets, v0’s Code Execution Block allows you to test code directly within the chat interface.

Link to headingStart prompt engineering with v0 today

v0's ability to generate high-quality UIs, leverage third-party libraries, and provide detailed code breakdowns makes it an invaluable tool for frontend development—and everyone else surrounding the development workflow.