UI components · Marketing
Pricing Table
Also called: Pricing plans, Pricing cards, Plan comparison, Pricing tiers
The section on a marketing site that lists a few plans side by side. Each one shows the price, who it's for, what's included, and a buy button, and the recommended plan is usually highlighted.
Click “Labeled” to see what each part is called, or “Anti-pattern” to see the most common mistake.
How to tell AI
Swap in your own content firstBuild a pricing table in the pricing section. At the top, an h2 heading and a "Monthly / Yearly" segmented toggle (show the real yearly discount, like "2 months free"; if there's no yearly discount, leave the toggle out). Below it, 3 plan cards of equal height, 3 columns on desktop and 1 on mobile. Each card has the plan name and a line on who it's for at the top, a 40px bold price in the middle (format "$number / month"), 5–6 features with check marks below that, and a full-width button at the bottom. Give the middle plan a 2px accent border, a "Recommended" label, and a primary button; the other two get outlined buttons. Use only the real plans I provide for names, prices, and features: [Plan 1: name, price, features] [Plan 2] [Plan 3]. Don't make up prices or features. Under the cards, add one line of 13px gray text saying whether tax is included and whether users can cancel anytime.
Send to
01Decide
Does your content look like this?
Check both columns to confirm Pricing Table is what you need.
Use Pricing Table when
- Marketing sites and landing pages that need to show pricing openly so visitors can compare and choose a plan
- Products with two or three plans that differ in features or usage, where the differences need a side-by-side view
- Upgrade and checkout pages that guide existing users from the free plan to a paid one
Pick something else when
A single price. One line like "$99 / year" with a buy button is enough.
Prices that are quoted case by case and can't be published. Use a CTA section with "Talk to sales."
Use insteadCTA SectionLots of individually sold items like products or courses
Use insteadCard Grid
Not sure? Upload a screenshot and page analysis will check which layout each block should use.
02Pitfalls
Common misuse
It looks like it works, but it makes things harder for users.
- 01
Plan feature lists that are nearly identical except for the last line, so visitors can't see why they should pay more
The wireframe below shows this case. The red dashed box marks the problem.The wireframe on the right shows this case. The red dashed box marks the problem.
- 02
A price that just says "$99" without saying monthly or yearly, or whether tax is included
- 03
An "Enterprise" plan made up to look complete that isn't actually sold, or an "Unlimited" claim the product can't deliver
03Spot it
How to spot it
Look at the overall structure first, then check a few features you can spot at a glance.
Structure
A section heading, an optional monthly / yearly toggle, and 2–4 plan cards side by side. Each card has the plan name, who it's for, the price, a feature list, and a buy button. The recommended plan has a label or highlighted border, and a feature comparison table can follow below.
PartsClick one to highlight it in the wireframe above
04Explained
In detail
A pricing table is usually 2–4 plan cards in a row. At the top of each card is the plan name and a line on who it's for, then a big price with currency and billing period (like "$29 / month"), then a list of included features with check marks, and a button at the bottom. The recommended plan gets a thicker border or a "Recommended" label. There's often a "Monthly / Yearly" toggle above the cards that shows how much you save per year. Products with many plans or detailed features add a full feature comparison table below the cards.
It and a Card Grid are both rows of cards, but the cards in a pricing table are one set of options meant to be compared together, so there's a fixed number and the fields line up. A card grid is a batch of content you browse one by one. The detailed comparison chart is itself a Table, while "pricing table" usually means the row of plan cards above it. The "Monthly / Yearly" switch is a Segmented Control.
Prices, features, and usage limits are product facts and must match what you actually charge. Don't invent an "Enterprise" tier to look complete, and don't write "Unlimited" if it isn't. Make the difference between plans obvious at a glance by putting the features that differ at the top of each list. Say whether the price is per month or per year and whether tax is included. Mark only one plan as recommended. On mobile, switch to one column and put the recommended plan first.
Developer infoTerm ID, DOM cues, match priority
- Term ID
component-pricing-table- DOM selectors
The extension matches these CSS selectors when it inspects a page locally (tags, ARIA roles, common component library classes).
section:is([class*="pricing" i], [id*="pricing" i], [class*="plans" i], [id*="plans" i])table:is([class*="pricing" i], [class*="plans" i], [class*="plan-compar" i]):is([class*="pricing" i], [class*="plan-card" i], [class*="price-card" i]) :is(ul, ol):is(div, section, ul):has(> :nth-child(1) > [class*="price" i] ~ :is(ul, ol)):has(> :nth-child(2) > [class*="price" i] ~ :is(ul, ol)):not([class*="product" i], [class*="goods" i])
- Class keywords
Class names, ids and data-testid are split into words and matched in order, so page-header, PageHeader_root__x7a and pageHeader all become page, header.
pricingpricing-tablepricing-sectionpricing-gridpricing-cardspricing-cardpricing-plansprice-cardplansplan-cardplan-features
- Component names
React / Vue component names read in development mode. Case-insensitive; library prefixes such as El, Ant and Mui are dropped.
PricingPricingTablePricingSectionPricingPlansPricingCardPlanCardPriceCardPlans
- Structure
Computed from how the element is laid out and styled. It only adds to the score and never decides on its own.
starts with headinggrid of itemsrepeated items
- Priority
- 4 · when several match at the same level, the higher priority wins
- Version
- v2 · updated Sep 30, 2026