Theme · Company Site · Beginner

SaaS Pricing Page

Pricing page = three tier cards, a billing toggle, and one recommended plan marked by an accent border.

How to prompt it

Build a SaaS pricing page for "Atlas", a project-analytics platform.

STYLE
- Airy light background (#f6f9fc), white tier cards, hairline borders
- Teal accent (#0d9488) for the highlighted card, badge, and buttons
- Generous whitespace, 12px radii

LAYOUT
- Header: title "Simple pricing for growing teams" and a Monthly / Yearly · save 20% toggle (Monthly on)
- Three tier cards side by side; the middle one is highlighted:
  - Starter $12/mo: "3 projects", "Email support"; tall adds "5 GB storage"; button "Start free"
  - Growth $49/mo (badge "Most popular"): "Unlimited projects", "Advanced analytics", "Priority support"; tall adds "50 GB storage"; solid button "Start free trial"
  - Scale $199/mo: "Everything in Growth", "SSO & SCIM", "99.9% SLA"; tall adds "Dedicated CSM"; button "Contact sales"

COMPONENTS
- Billing toggle (segmented control, active state filled)
- Tier name, price with a "/mo" suffix, feature list with check-style rows
- A "Most popular" badge on the highlighted tier
- A full-width CTA button per tier (teal when highlighted)

TECHNICAL
- React
- Tailwind CSS
- shadcn/ui

Revise only the highlighted tier of this pricing page.

CHANGES
- Mark it with a 2px accent border instead of a glow or a scale
- Move the Most popular badge to the top edge, centred
- Make the CTA full width and filled with the accent

DO NOT
- Do not change the other two tiers
- Do not restyle the billing toggle

Build a production Stripe-style SaaS pricing page.

STYLE
- Airy #f6f9fc background, white tier cards, hairline borders
- One blurple accent #635bff for the highlighted tier, badge, and buttons
- 12px radii with generous whitespace

LAYOUT
- Header line with the page title and a monthly and yearly toggle
- Three tier cards side by side, the middle one highlighted
- Feature comparison table below the tiers
- FAQ section to close the page

COMPONENTS
- Card, button, navbar, badge, table, accordion, toggle
- The toggle is a segmented control with the active state filled

STATES
- Yearly selected: prices swap with a short fade and a savings badge appears
- Below 900px the tiers stack, with the highlighted tier staying first

TECHNICAL
- React, Tailwind CSS, shadcn/ui
- Prices use tabular-nums

MOTION
- Billing toggle: price cross-fades over 250ms and card height settles at 200ms ease-out.
- Recommended tier: a static 2px accent border. No pulse, no glow, no scale.
- Do not float all three cards on hover at once.
- prefers-reduced-motion: instant price swap.

Modify prompts change only the target — the rest of your page stays untouched.

Tips

Let whitespace do the work — the highlighted tier earns attention with a thin accent border, not a glow.

SaaS Pricing Page

Simple pricing for growing teams

Tips

See also

Components

Animations

Styles

Themes

Prompts

Glossary

Anti-patterns