v0 by Vercel

Write a Prompt Describing the Component

Clearly describe the number of pricing plans, highlighted features, and desired design style.

Enter the prompt: 'Create a pricing page with 3 plans (Basic, Professional, Business) in card format, with a prominent CTA button on the middle plan, in a minimalist style.'

Specify the brand color to make the initial output closer to actual requirements.

Compare the Created Versions

Review the different design variations proposed by v0.

Scroll through the versions, selecting the one with a layout that best matches your vision to continue refining.

There is no need to select the perfect version right away; you can combine ideas from multiple versions in subsequent chats.

Refine Through Conversation

Request detailed adjustments, such as spacing, colors, or adding promotional badges.

Enter the next request, such as 'add a Most Popular badge for the middle plan and increase the contrast of the CTA button.'

Edit each small detail one at a time to maintain control and avoid having v0 regenerate the entire component unnecessarily.

Copy Code to the Project

Obtain the completed component code to add to the actual codebase.

Click Copy Code or use direct integration to add the component to the existing Next.js project.

Check that dependencies (such as shadcn/ui, lucide-react) are installed in the project before pasting the code.

Adjust According to the Existing Design System

Synchronize colors, fonts, and spacing with the company's pre-existing design system.

Update the Tailwind theme variables (colors, fonts) in the configuration file so the component matches other pages in the project.

Create shared theme tokens so future components created from v0 automatically synchronize without needing manual adjustments each time.