Build · UI components · beginner

Build a Pricing Page with Three Tiers

UI components SaaS beginner v0LovableBolt.new

How to use

  1. Copy the prompt below
  2. Paste it into v0, Lovable, Bolt.new
  3. Review the output and follow up with refinements
Prompt
Build a /pricing page with three subscription tiers laid out in a horizontal card row. The tiers are: Free ($0/month), Starter ($19/month, marked as "Most Popular"), and Pro ($49/month). Each card should show the plan name, price with billing period, a list of exactly 5 feature bullet points using checkmark icons, and a CTA button ("Get started free" for Free, "Start with Starter" and "Go Pro" for the paid plans). The Starter card should be visually elevated — use a highlighted border color or a "Most Popular" badge at the top to distinguish it. Add a monthly/annual billing toggle above the cards; when annual is selected, show a 20% discounted price and a "Save 20%" label. On screens narrower than 768px, stack the cards vertically with the Starter card appearing first. Use clean card styling with a subtle border and no drop shadows.

Related prompts

Was this helpful?