Comparison Table Kit for Framer

Installation

1. After purchase, copy your component link, click the canvas in your Framer project and paste (Cmd+V / Ctrl+V). The component appears in your Assets as a code component.
2. Drag it onto a page. It drops in with sample plans, categories and features in the default style.
3. Set its Width to Fill to follow the page, or give it a fixed width. Leave Height on Auto: the component grows with its rows.
4. Select it and edit everything in the properties panel. Content comes first, then the fonts and the Style · … groups.
5. Use Preview or the published site to try the toggle, the categories, the tooltips and the sticky header. On the canvas the table shows its resting state so it stays easy to select.

How the content is organised

A comparison is built from three lists in the panel. Click a row to edit it, use + to add one and drag rows to reorder them.

Rows show under their category in the order of the Features list. To move a row to another group, change its Category number. A row shows one value per product: with three products, the Product 4 to Product 6 values are ignored.

Section Heading

• Show Section Heading: Shows the title and subtitle above the table. Turn it off when the page already has a heading right above the comparison.
• Title: Main heading, for example “Compare Plans & Features”.
• Subtitle: Text under the title. Leave it empty to hide it.
• Heading Tag: H1 to H5. Use H1 when the comparison starts the page, H2 for a main section, H3 under another H2.
• Heading Alignment: Center or Left. A centred subtitle keeps a comfortable line length.

Billing Toggle

• Enable Billing Toggle: Shows the switch between two pricing periods. Off shows only each plan’s first price.
• First Label: Text of the first option, for example “Monthly”.
• Second Label: Text of the second option, for example “Yearly”.
• Discount Badge: Small badge next to the second option, for example “Save 20%”. Leave it empty to hide it.
• Default Active: Which period shows when the page loads.

Visitors switch periods with a click, or with Enter or Space on a focused option. The sticky header switches with it.

Products / Plans

Up to six products. Each row in Products / Plans has these settings:

• Product Name: Column heading, for example Starter, Professional, Enterprise.
• Icon set: Phosphor or Feather, Framer’s own icon sets.
• Icon: Optional icon above the name. None hides it.
• Icon weight: Thin, Light, Regular, Bold, Fill or Duotone (Phosphor only).
• Featured / Highlighted: Highlights the whole column: header, category rows, values and the bottom button, with a bar across the top.
• Badge Text: Label above the name, for example “Most Popular”. It doesn’t move the column content.
• Price (First Period): Price with currency and suffix, for example “$29/mo”.
• Price (Second Period): Price shown when the toggle is on the second period.
• Price Note: Small text under the price, for example “billed annually” or “per user”.
• Button Text: Text of the column’s button (header and bottom row).
• Button Link: Where the button goes: a URL, an email or phone link, or one of your Framer pages.
• Open in new tab: Opens the link in a new tab.
• No follow: Adds rel=“nofollow” to the link.
• Button Style: Primary (filled), Secondary (outlined) or Ghost (text only). Buttons line up at the bottom of the header whatever the content height.

Feature Categories

Up to ten categories. Each row in Feature Categories has:

• Category Name: Row label for the group, for example Core Features.
• Collapsible: Lets visitors fold the category open and closed.
• Expanded by Default: Whether a collapsible category starts open. Shown only while Collapsible is on.

A collapsible category label is a button: click it, or press Enter or Space, to fold its rows. The arrow turns to show the state.

Features

Each row in Features has:

• Feature Name: Label in the first column.
• Category: The number of the category this row sits in: 1 is the first category in Feature Categories, 2 the second, and so on.
• Tooltip: Hover and focus text with an info icon next to the name. Leave it empty for no tooltip.
• Product 1 · Value Type … Product 6 · Value Type: The value in each product column: Included (checkmark), Not included (cross), Custom text or Partial (dash). Product 1 is the first column.
• Product 1 · Custom Text … Product 6 · Custom Text: Text for that column, for example “Up to 5”, “10 GB” or “Unlimited”. Shown when its Value Type is Custom text.

Value icons: a checkmark for Included, a cross for Not included and a dash for Partial. Use custom text where a plan needs a specific amount.

Table Settings

• Sticky Header Row: Keeps the product header at the top of the screen while visitors scroll through a long table, then lets it slide away with the table’s end.
• Sticky Feature Column (Mobile): Keeps the feature names in place while the table scrolls sideways at tablet and mobile widths.
• Striped / Alternating Rows: Alternating row background. Stripes follow the visible rows when categories fold.
• Show Bottom CTA Row: Repeats the buttons under the table.
• Row Hover Highlight: Highlights a feature row under the pointer.
• Animate Category Collapse: Slides rows closed and open. Off folds them at once.
• Scroll Reveal Animation: Heading, toggle, table and rows fade up as they come into view. Visitors with reduced motion turned on see everything at once.

Sticky Header

• Pinned: Once the table’s top scrolls past the top of the screen, a copy of the product header stays pinned there with a soft shadow, with working buttons and the current prices.
• Sliding away: When the end of the table reaches the header, the header slides up with it, so it never covers the next section.
• Sideways scrolling: On narrow screens the pinned header scrolls sideways together with the table, in both directions.
• Off: Turn off Sticky Header Row for short tables, as in Demo 3.

Style Controls

Each group is a Style · … entry in the panel. Click it to open the group.

Style · Primary Font and Style · Secondary Font

Font pickers. See Fonts below.

Style · Section

• Background Color: Background of the whole section.
• Padding Top (px): Space above the content. Scales to 60% at the mobile breakpoint.
• Padding Bottom (px): Space below the content. Scales to 60% at the mobile breakpoint.

Style · Container

• Max Width (px): Widest the content gets (600 to 1600).

Style · Heading

• Title Color: Title, and the colour of a collapsible category label on hover.
• Title Font Size (px): Title size. 80% at the tablet breakpoint, 65% at mobile.
• Title Font Weight: Regular, Medium, Semi-bold or Bold.
• Subtitle Color: Subtitle.
• Subtitle Font Size (px): Subtitle size.
• Heading Margin Bottom (px): Space between the heading and the toggle or table.

Style · Table

• Table Background: Table fill, also behind the sticky feature column.
• Border Color: Table outline and row dividers.
• Border Radius (px): Table corners.
• Table Shadow: None, Small, Medium or Large.
• Cell Padding Vertical (px): Space above and below feature values.
• Cell Padding Horizontal (px): Space at the sides of every cell.
• Stripe Row Color: Background of alternating rows.
• Row Hover Color: Background of the row under the pointer.

Style · Product Header

• Header Background: Header row, the sticky header and the bottom button row.
• Product Name Color: Product names.
• Product Name Font Size (px): Product names.
• Product Name Font Weight: Medium, Semi-bold or Bold.
• Price Color: Prices.
• Price Font Size (px): Prices. 70% at tablet, 55% at mobile.
• Price Font Weight: Medium, Semi-bold or Bold.
• Price Note Color: Price notes, and the tooltip icons.
• Price Note Font Size (px): Price notes.

Style · Featured Column

• Featured Column Background: Body cells of the featured column.
• Featured Header Background: Header and bottom button cell of the featured column.
• Featured Border Color: Bar across the top of the featured column.
• Featured Border Width (px): Height of that bar. 0 hides it.

Style · Badges

• Badge Background: Product badge fill.
• Badge Text Color: Product badge text.
• Badge Font Size (px): Product badge text size.
• Badge Border Radius (px): Product badge corners.

Style · Category Headers

• Category Row Background: Background of the category rows.
• Category Text Color: Category labels and their arrows.
• Category Font Size (px): Category labels.
• Category Font Weight: Medium, Semi-bold or Bold.

Style · Feature Rows

• Feature Name Color: Feature names.
• Feature Name Font Size (px): Feature names.
• Value Text Color: Custom text values.
• Value Font Size (px): Custom text values.
• Checkmark Color: Included icon.
• Cross Color: Not included icon.
• Partial (Dash) Color: Partial icon.
• Check/Cross Icon Size (px): Size of the three value icons.
• Tooltip Background: Tooltip fill and its arrow.
• Tooltip Text Color: Tooltip text.

Style · Buttons

• Primary Background: Primary button fill and border.
• Primary Text: Primary button text.
• Primary Hover Background: Primary button on hover.
• Secondary Background: Secondary button fill.
• Secondary Text: Secondary button text.
• Secondary Border: Secondary button outline.
• Secondary Hover Background: Secondary button on hover.
• Ghost Text: Ghost button text.
• Ghost Hover Background: Ghost button on hover.
• Button Font Size (px): All buttons. Scales down at the tablet and mobile breakpoints.
• Button Font Weight: Regular, Medium or Semi-bold.
• Button Padding Vertical (px): Button height.
• Button Padding Horizontal (px): Space at the button sides.
• Button Border Radius (px): Button corners. 50 gives pill buttons.
• Full Width Buttons: Buttons fill their column. Off sizes them to their text.

Style · Billing Toggle

• Toggle Background: Track behind the two options.
• Toggle Text Color: Inactive option.
• Active Text Color: Active option.
• Slider Color: Fill behind the active option.
• Discount Badge Background: Discount badge fill.
• Discount Badge Text: Discount badge text.
• Toggle Border Radius (px): Corners of the track and the active option.

Style · Responsive

• Tablet Breakpoint (px): Component width where the label column narrows and the header scales down.
• Mobile Breakpoint (px): Component width where columns get a 140px minimum and the table scrolls sideways.

Fonts

• Style · Primary Font: Title, product names and prices.
• Style · Secondary Font: Everything else: subtitle, toggle, badges, category labels, feature names, values, buttons, price notes and tooltips.
• Defaults: Both start on Inter, which is also what the font pickers show before you change them.
• Your own fonts: Any family you pick, including Google and uploaded fonts, is used as chosen.
• Weights and sizes: Weights and sizes come from the Style groups (for example Title Font Weight, Price Font Size). The weight and size inside the font pickers have no effect.

Responsive Behavior

Breakpoints follow the width of the component itself, so the layout adapts the same way in a full-width section or a narrow column.

• Desktop: A 240px feature column and equal product columns.
• Tablet: At the tablet breakpoint the feature column narrows to 180px, the header text, badges and buttons scale down, and the feature names stay in place while the table scrolls sideways.
• Mobile: At the mobile breakpoint the feature column is 140px, product columns keep at least 140px and the table scrolls sideways inside its frame. Section padding and text scale down further.

Accessibility

• Headings: The Heading Tag is yours to set, to fit the page outline.
• Keyboard: Tab reaches the billing options, every button, the collapsible category labels and the tooltip icons. Folded rows drop out of the tab order until they open again.
• Focus rings: Each of those shows a ring when reached by keyboard: a 2px ring in the element’s own text colour with a black or white edge, whichever stands out more, so it reads on light and dark tables. Mouse clicks show no ring.
• Billing toggle: A labelled group of two toggle buttons; screen readers announce which period is pressed. Enter and Space switch it.
• Categories: Collapsible labels are buttons that announce whether they are open and which rows they control. Folded rows are hidden from screen readers.
• Tooltips: Each info icon is a button named after its feature, with the tooltip text as its description. The tooltip shows on hover and on focus, and Escape closes it.
• Reduced motion: With reduced motion turned on, the scroll reveal and the fold animation are skipped.

FAQ and Troubleshooting

• Nothing happens when I click the toggle on the canvas: The canvas shows a still layout. Open Preview or the published site.
• A feature row doesn’t show: Check its Category number. It has to match a category in Feature Categories: 1 for the first, 2 for the second. After removing or reordering categories, update the numbers of the rows that belonged to them.
• A row shows the wrong value in a column: Product 1 is the first column. If you reordered Products / Plans, the values stay in their slots: update them to match.
• Where is Custom Text?: It appears under a value once its Value Type is set to Custom text.
• A category won’t open: If Collapsible is off, the category always shows its rows, unless Expanded by Default was turned off before. Turn Collapsible on, switch Expanded by Default on, then turn Collapsible off again.
• The sticky header doesn’t appear: It follows the page scroll. If the comparison sits inside a frame that scrolls on its own, the header won’t pin. Also check Sticky Header Row is on.
• The sticky header sits behind my navigation: The header uses z-index 9999. Give your fixed navigation a higher z-index if it should stay on top, or turn off Sticky Header Row.
• The table scrolls sideways on a laptop: Each product column needs room. With five or six products, raise Max Width or lower the cell padding; at the mobile breakpoint columns keep a 140px minimum by design.
• The mobile layout shows on desktop: Breakpoints follow the component’s width. In a narrow column, lower the Tablet and Mobile breakpoints.
• Pill buttons: Set Button Border Radius to 50, as in Demo 2.
• Dark tables: Set a dark Section Background and Table Background, then lighter text, border, stripe and featured colours, as in Demo 2.
• Two comparisons on one page: Each one keeps its own toggle, categories, tooltips and sticky header.

Known Limits

• List sizes: Up to six products, ten categories and 300 features in total. Framer can’t enforce a minimum, so an emptied list shows an empty table part.
• Category numbers: Features refer to categories by position. Reordering or removing categories means updating the numbers on their features.
• Row height: With Animate Category Collapse on, a feature row is at most 200px tall. Keep feature names to a line or two.
• Sticky header in scroll frames: The sticky header follows the page scroll only.
• Sticky header and keyboard: The pinned header’s buttons come last in the keyboard order of the page.
• Inline categories: A category that isn’t collapsible but has Expanded by Default off keeps its rows hidden. See the FAQ.
• Breakpoints: Tablet and mobile layouts follow the component’s own width. On a full-width layer they match the screen, give or take a scrollbar.
• Toggle keys: The billing options respond to Tab, Enter and Space; arrow keys don’t move between them.

Demo Notes

• Demo 1 (SaaS): The default settings: Inter, billing toggle, collapsible categories, a featured plan with a badge and the sticky header.
• Demo 2 (Dark): Space Grotesk and DM Sans on a dark background, indigo accent, pill buttons (Button Border Radius 50), no stripes.
• Demo 3 (Minimal): Libre Baskerville and Source Sans 3, no toggle, no badges, no bottom buttons and Sticky Header Row off.
• Demo 4 (Wide): Outfit, warm palette with an orange accent, a 1400px container and two categories folded on load.