10 SaaS Pricing Page Examples and the Decisions Worth Borrowing

A useful SaaS pricing page helps a visitor identify the relevant plans, compare their differences and understand the next step. These ten captured examples approach that job with different card counts, selectors and comparison tables. Use them to choose a structure that fits your product's actual packaging.

The registry snapshot includes 27 sites with pricing captures

The registry snapshot generated on September 20, 2026 contains 27 sites and 143 screenshots tagged pricing. Those records include different viewports, themes, crops and previews, so they do not represent 143 distinct pricing pages. The examples below use capture captions and metadata. They are not a full visual audit of all 143 screenshots.

Choose an example for the decision you face

1. Gamma separates audience from billing period

Gamma's pricing capture places Individual and Business tabs above a separate monthly and annual switch. Four cards sit below, with a pink ribbon and gradient button on Pro. The two controls answer different questions. Keep their labels explicit if your product needs both, and verify which control changes the plan set. The captured mobile page uses horizontally scrollable cards, so it also gives you a concrete alternative to stacking every plan.

2. Canva keeps the recommendation inside the comparison

Canva's captured pricing page has four plans and an audience switch between individuals and business and education. The Business card has a purple outline and Recommended ribbon. Its emphasis shares the card's border and position in the row. On mobile, the cards stack and feature details collapse behind accordions. Borrow that disclosure pattern when long lists would bury the next plan, then make sure visitors can still find the difference that matters to them.

3. Brex groups the detailed comparison below the cards

Brex's pricing record shows Essentials, Premium and Enterprise in three white cards with orange buttons and checkmark lists. A separate comparison accordion groups corporate cards, expense management, bill pay and travel. The initial row explains the offers; the grouped table gives a visitor a place to investigate a particular capability. Use this division when your feature matrix is long. Preserve clear group names and a route back to the plan's action button.

4. Cloudflare selects the product family first

Cloudflare's homepage pricing section puts Network, SASE and Compute tabs above a four-tier card row. An orange active state identifies the selection. This is useful inspiration for a product with distinct service families, each needing its own comparison. It also shows why a pill-shaped control should have a precise label. A product selector changes the subject of the offer, while a billing switch changes its term. The capture includes light and dark treatments of this section.

5. n8n gives the usage unit its own place

n8n's pricing captures show four dark cards with execution counts in pills beside the plan information. Below them, Cloud and Self-hosted controls introduce grouped feature tables. Green checks, grey crosses and text values repeat through the long comparison. For usage-based software, borrow the visibility of the billing unit. A visitor should be able to connect a plan with what they will consume. Check the readable table segments as well as the full-page overview before choosing row density.

6. Squarespace repeats feature groups across tiers

Squarespace's captured pricing page aligns four plans and repeats groups for building a website, accepting payments and selling products or services. The Core card has a white fill, shadow and blue recommendation pill. On mobile, the tiers stack into full-width cards. Study the repeated group order when your visitor needs a direct feature comparison. In the stacked version, consistent headings help them find the same capability again without depending on desktop row alignment.

7. Weights & Biases gives the plans equal weight

Weights & Biases' pricing record shows a Cloud-hosted and Privately-hosted selector above Free, Pro and Enterprise cards. The cards share outline buttons and teal checks, with no lifted tier or recommendation badge in the captured state. A separate dark card covers academic access. Use it as a reference when visitors belong to distinct buying situations and a universal recommendation would be hard to justify. The comparison table repeats plan headers and groups capabilities under category labels.

8. Writer makes a two-plan comparison explicit

Writer's captured plans page uses Starter and Enterprise cards with black pill buttons. Enterprise has a pale lavender background, and that tint continues down its column in the feature matrix. The page then groups FAQ content under General, Security and Billing tabs. Borrow the continuous column treatment when a long table needs orientation. Two cards also offer a useful check on your own packaging. Add another tier only when you can explain the distinct customer and offer it represents.

9. RevenueCat follows the offer with shared capabilities

RevenueCat's pricing captures show a white Pro card beside a red-outlined Enterprise card on a lavender-grey canvas. A section navigation follows, then six feature groups covering Build, Acquire, Convert, Understand, Retain and Improve. The captured mobile page stacks the same sequence. This is useful when the plan choice and the product's shared capabilities need different explanations. Keep shared features visibly separate from plan differences so readers do not have to infer which list controls their purchase.

10. Zapier connects product, usage and billing controls

Zapier's captured pricing page places a Platform, Agents and Chatbots selector above a task-usage slider, monthly and yearly switch, and four plan cards. Each control changes a different dimension of the offer. Study the order if your pricing has several inputs. Then test the states your own implementation permits. The displayed plan, usage allowance and billing term should agree after each change, including on mobile. A static capture records the arrangement, so live interaction testing remains necessary.

Turn the examples into a pricing-page brief

The examples support several choices rather than one universal template. Gamma and Squarespace promote a tier; Weights & Biases keeps the captured cards equal. Writer and RevenueCat use two cards, while several other references use four. Start with your real offer and choose the reference that explains it.

1. 01Name the audience, billing unit, term and actual plan differences before drawing cards.
2. 02Choose whether a selector changes audience, product, hosting or billing. Write a label for that exact choice.
3. 03Specify card order, recommendation treatment, comparison-table groups and the action for each tier.
4. 04Give your coding agent a desktop capture and a relevant mobile capture. Request a readable segment for dense tables.
5. 05Render the result, check disclosure and selector behavior, and verify that prices and purchase terms come from your own product data.