Design mode

Design mode provides an intuitive, visual way to build and refine your app's user interface. It allows you to select any element on the page, inspect its properties, and make precise adjustments using either natural language prompts or a comprehensive design panel.

Enabling design mode

You can enable Design Mode in a couple of ways:

• Keyboard Shortcut: Press Option + D.
• Using the UI: Click on the Design tab at the top of the v0 interface.

Once enabled, your cursor will act as a selection tool, allowing you to highlight and select elements on the page.

Selecting elements

With Design Mode active, as you move your cursor over your application's preview, different elements will be highlighted. This allows you to pinpoint the exact component you wish to modify. Simply click on a highlighted element to select it.

Modifying elements

Once an element is selected, you have two primary ways to modify it:

1. Prompting (for complex changes)

For more complex or structural changes, you can use the prompt input. Describe the changes you want to make in plain English. For example, "add a button next to this text" or "make this a three-column grid". This is the most powerful way to leverage v0's generative capabilities.

2. The design panel (for fine-tuning)

For fine-grained visual adjustments, the Design Panel offers a suite of controls. This is ideal for tweaking styles to perfection. The panel includes controls for:

• Typography: Adjust font family, size, weight, line height, letter spacing, alignment, and text decoration.
• Color: Change the text color.
• Background: Set the background color.
• Layout: Control margin and padding for all sides.
• Border: Define border color, style, and width.
• Appearance: Modify opacity and corner radius.
• Shadow: Add or customize box shadows.
• Content: Directly edit the text content of an element.

Key features and benefits

• Tailwind Native: Design mode is built on top of Tailwind CSS. It seamlessly integrates with your existing tailwind.config.js file, pulling in your design tokens (colors, spacing, fonts, etc.) so you can stay on-brand.
• Free Visual Tweaks: Making adjustments in the Design Panel does not consume any of your v0 tokens. Feel free to experiment and fine-tune your designs without worrying about usage limits. Prompt-based changes will still use tokens.

Saving your work

Once you are happy with your changes, click the save button at the bottom of the preview to commit your edits.