Compare Plans
A full feature matrix for three plans with pricing and CTAs in the column heads, grouped feature rows, and a tinted band on the popular plan.
A full feature matrix for three plans with pricing and CTAs in the column heads, grouped feature rows, and a tinted band on the popular plan.
The source for every Marketing block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Compare Plans answers the question the pricing cards leave open: what exactly do I get at each level? A centered header sits above a full feature matrix for three plans. Each column head carries the plan name, a one line audience, the price, and a CTA, so a visitor can act the moment the table convinces them. Feature rows are grouped under category labels, and each cell shows a check, a muted dash, or a concrete value like a storage limit.
The recommended plan is tinted as a continuous column band, which steers the eye without a floating card or a second layout. The table is built on the shadcn Table primitives, adapts to light and dark through theme tokens, and scrolls horizontally on small screens so no column ever collapses.
Reach for this block on a dedicated pricing page, below a card based section like Compact Tier Cards, for the visitor who has narrowed the choice and now wants the fine print. It also stands alone when your plans differ mainly by limits and entitlements, as in a developer tool or an infrastructure product, where a matrix says more than three paragraphs of card copy ever could.
A natural flow around it on a Marketing Pro page:
Before
After
The obvious fit is three self serve tiers compared feature by feature. A few other ways to use the frame:
Tip: rows earn their place by differing between plans. If every cell in a row is a check, cut the row or fold it into the section above, and let the table spotlight the differences a buyer is actually paying for.