Comparison

These blocks help people choose. They take typed props for the plans and features, so you can swap in your own rows. Checks and dashes always come with text for screen readers, so nothing is shown with color or an icon alone.

Switches, selection and expand buttons only change what is shown. Selecting a plan shows a toast, so connect those buttons to your checkout or your sales form.

Style One

Feature matrix with a column for each plan, features grouped by category, checks, limits and a recommended plan.

Style Two

Plan cards with specs lined up in rows, and a switch that hides the rows where every plan is the same.

Style Three

Your product against an alternative with a switch to hide ties, a score for each side and a call to action.

Style Four

Matrix with a monthly and yearly switch, a plan you can select and one button that follows the selection.

Style Five

Checklist columns for each plan with included and not included items and a show all features button.

Style Six

Long comparison table with a sticky header, a sticky first column and a menu that jumps to a group.