Pricing Table Design Templates and Examples
A clear pricing table helps visitors pick a plan in seconds. Below are 33 pricing table and pricing page design templates, from classic plan cards and feature comparison charts to SaaS, hosting and creative layouts. We also cover what to include, the most common layouts and pricing table design tips that improve conversions.
Every pricing table on this page:
- Editable Photoshop (PSD) and Adobe XD files
- Fully organized layers, RGB, free Google Fonts
- A UI design to customise and hand off to developers, not coded HTML
What makes a good pricing table?
A pricing table compares your plans side by side: name, price, what is included and a button to choose. The best ones are easy to scan, highlight one recommended plan and remove any doubt about what customers get.
- Three or four plans: enough choice without overwhelming.
- One highlighted plan: a Most Popular or Recommended label guides the decision.
- Clear prices: big numbers with the billing period right next to them.
- Short feature lists: the differences between plans, not every feature.
- A visible button on every plan with clear wording like Get Started or Start Free Trial.
Classic pricing card layouts
Three or four plan cards side by side, with the recommended plan highlighted. The most common pricing table on SaaS and service websites.
1. Basic to Enterprise, Blue
Four clean white plans from $0 to $34 with a Recommended Professional plan raised in the middle and a monthly/annual switch.
Photoshop (PSD) + Adobe XD
2. Choose Your Business Plan
Four outlined cards with illustrations, a Most Popular banner and a billing toggle.
Photoshop (PSD) + Adobe XD
3. Recommended Plan, Blue Wave
Three cards on a blue wave, with the Premium plan raised and a Start Free Trial button.
Photoshop (PSD) + Adobe XD
4. Student, Pro, Company
A website-style pricing page with a bright blue Pro card raised between two white plans.
Photoshop (PSD) + Adobe XD · Bootstrap 1140 px grid
5. Bronze, Gold, Platinum
Three white cards with large orange prices and a Popular ribbon, on a turquoise background.
Photoshop (PSD) + Adobe XD
6. Purchase Method, Pink
Four rounded cards on a pink-to-orange gradient, with a Popular Pro plan outlined in blue.
Photoshop (PSD) + Adobe XD
7. Purchase Option Kit
Three illustrated plans for Study, Pro and Enterprise with big blue Get Started buttons.
Photoshop (PSD) + Adobe XD
8. Easy Way to Connected
Four green-tab cards on a green wave, with a contact-us option for the top plan.
Photoshop (PSD) + Adobe XD
9. Choose Your Best Plan, Purple
Three white cards with purple Started buttons and feature notes beneath each plan.
Photoshop (PSD) + Adobe XD · Bootstrap 1140 px grid
Comparison table pricing designs
A feature grid with check and cross marks, for products with many features. Customers compare plans line by line.
10. Pricing Comparison Chart
A five-column chart on violet, with fees and features ticked or crossed per plan.
Photoshop (PSD) + Adobe XD
11. Bronze, Gold, Platinum Comparison
Plan headers with icons above a long feature comparison, on orange.
Photoshop (PSD) + Adobe XD
12. Best Choice for Your Plan
Four plans in one white card with a feature table below, on soft purple and teal shapes.
Photoshop (PSD) + Adobe XD
13. Music for Everyone
A music streaming comparison with a popular column and a player bar at the bottom.
Photoshop (PSD) + Adobe XD
14. Product Performance
Three plan columns with a blue feature list on the left for reporting and support.
Photoshop (PSD) + Adobe XD
15. Choose Your Plan, Pink
A five-plan comparison from Free to Agency, with ribbons on the best-value plans.
Photoshop (PSD) + Adobe XD · Bootstrap 1140 px grid
16. What Your Plan?
A green and blue server comparison with a Popular Pro plan and a monthly/yearly toggle.
Photoshop (PSD) + Adobe XD
17. Creative Market Plans
A light green four-plan comparison with icons and Sign Up buttons.
Photoshop (PSD) + Adobe XD · Bootstrap 1140 px grid
SaaS, hosting and app pricing tables
Plans for software, hosting and digital services, usually with storage, users or bandwidth listed per tier.
18. Web Hosting, Purple Ribbons
Three ribbon-shaped plans with avatars and pink cart buttons, on purple.
Photoshop (PSD) + Adobe XD · Bootstrap 1140 px grid
19. Hosting, Navy
Three navy plans with strikethrough prices, savings badges and a Best Seller outline.
Photoshop (PSD) + Adobe XD · Bootstrap 1140 px grid
20. URL Shortener, Dark
Four plans on dark navy, with a bold coral Gold plan in the middle.
Photoshop (PSD) + Adobe XD
21. Hosting Pro, Green Lights
Four plans with spec tables and a starred Pro plan on a dark green photo.
Photoshop (PSD) + Adobe XD
22. Simple Pricing Table
Five plans with icons and specs, ending in a red Enterprise contact plan.
Photoshop (PSD) + Adobe XD
23. Choose Your Plan, List
A stacked plan list with orange buttons and a feature checklist beside it.
Photoshop (PSD) + Adobe XD
24. Enterprise Package
Four plans with icons and 30-day trial notes inside a framed card.
Photoshop (PSD) + Adobe XD
Creative and media pricing designs
Pricing for streaming, stock images, creative services and memberships, with more visual layouts.
25. Watch Movie Like a Reality
Four streaming plans with colored top bars and a starred Premium plan.
Photoshop (PSD) + Adobe XD
26. Film and TV Plans
Four plans with a red Recommended Premium plan and a website header.
Photoshop (PSD) + Adobe XD
27. Go Get Your Plan
A two-plan music offer with a photo panel, on orange and navy.
Photoshop (PSD) + Adobe XD · Bootstrap 1140 px grid
28. Stock Images, Dark
Stepped black and purple plans that grow taller with each tier.
Photoshop (PSD) + Adobe XD · Bootstrap 1140 px grid
29. Best Offer Agency
Four plans with a big blue blob highlighting the Agency plan.
Photoshop (PSD) + Adobe XD · Bootstrap 1140 px grid
30. Job Market, Yellow
Three plans with black-and-white portraits on yellow.
Photoshop (PSD) + Adobe XD · Bootstrap 1140 px grid
31. Package to Suit Your Plan
Four service packages for design, development, photography and TV, with icons.
Photoshop (PSD) + Adobe XD
32. Pricing List, Orange
A horizontal pricing list with orange prices and Get Started buttons per row.
Photoshop (PSD) + Adobe XD
33. Subscription Plans, Purple
Three subscription plans with a lilac highlighted middle tier, on deep purple.
Photoshop (PSD) + Adobe XD · Bootstrap 1140 px grid
What to include in a pricing table
| Element | Why it matters |
|---|---|
| Plan names | Short names that say who the plan is for: Basic, Pro, Business, Enterprise |
| Price and billing period | Per month or per year; show annual savings if you offer them |
| Monthly/annual toggle | Lets visitors switch prices without leaving the table |
| Key features per plan | Three to six items that explain the difference between tiers |
| Recommended badge | Draws attention to the plan most customers should pick |
| Call-to-action button | One clear action per plan: Get Started, Buy Now or Contact Sales |
| Free trial or guarantee | Reduces risk and the last bit of hesitation |
| FAQ below the table | Answers billing, cancellation and upgrade questions |
Pricing table design tips
- Put the recommended plan in the middle and make it slightly bigger or a different color.
- Order plans from cheapest to most expensive, left to right.
- Use a comparison grid only when products have many features; otherwise keep cards simple.
- Show savings for annual billing as a percentage or a strikethrough price.
- Design the mobile version: stack cards vertically or let them scroll sideways.
- Keep button wording consistent across plans, except for a Contact Sales enterprise plan.
- Match the rest of the page; see our landing page inspiration and admin dashboard designs.
Frequently asked questions
What is a pricing table?
A section of a website that compares plans or packages side by side, with prices, features and a button to choose each plan.
How many plans should a pricing table have?
Usually three or four. Fewer limits choice; more makes it harder to decide. Highlight one recommended plan.
What makes a pricing page convert?
Clear prices, one recommended plan, short feature lists, visible buttons, a free trial or guarantee, and an FAQ that answers billing questions.
What files are these pricing table templates?
Editable Photoshop (PSD) and Adobe XD files with organized layers and free Google Fonts. Many are built on a 1140 px Bootstrap grid.
Are these pricing tables coded?
No. They are UI design files to customise and hand off to developers or rebuild in your website builder.
Looking for more pricing table designs?
Browse the full collection of website UI templates.