Build · UI components · beginner
Build a Pricing Page with Three Tiers
UI components SaaS beginner v0LovableBolt.new
How to use
- Copy the prompt below
- Paste it into v0, Lovable, Bolt.new
- 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?
Enjoying this guide?
Get weekly practical guides, plus tool updates and implementation playbooks.