---
title: "SaaS Comparison Tabl — Free Framer component · Best of Framer"
description: "Free Framer component · by Teddesign · Text. Fully Customizable Pricing Table"
canonical: "https://framer.elliotli.dev/component/saas-comparison-tabl"
---

[Home](/)/[Components](/components)/[Text](/components/category/text)/SaaS Comparison Tabl

# SaaS Comparison Tabl

Fully Customizable Pricing Table

[View on Framer](https://framer.com/marketplace/components/saas-comparison-tabl/?via=elliot-li)

![SaaS Comparison Tabl preview image 1](https://framer.elliotli.dev/og/component/saas-comparison-tabl/e772e287a2984030/1600x1151.jpg)

## Summary

Fully Customizable Pricing Table

## Description

Boost your Framer website conversions with a premium SaaS pricing table designed for modern digital products. This fully responsive and highly flexible component features advanced hover interactions, a Mobile Stack layout system, and an intuitive property panel that makes customization effortless — no coding required.

## 🛠 Getting Started

1.  Drag and drop the **ComparisonTablePro** component onto your Framer Canvas.
    
2.  Set the component width to **Fill** to ensure it automatically adapts to different screen sizes.
    
3.  Select the component to open the customization options in the right properties panel.
    

## 📦 Managing Plans

In the **Plans** section, you can add, duplicate, or remove pricing plans with ease.

To highlight your best-selling plan, open the plan settings, enable **Highlight (Featured)**, and add your preferred label in **Badge Text** (for example: “Most Popular”).

## 📋 Managing Features (Rows)

In the **Features (Rows)** section, you can add unlimited feature rows.

Enable **Is Category?** when you want to create a section divider or category label (for example: “Core Features”).

For standard feature rows, open the **Plan Values** folder and enter the corresponding values for each plan.

🔥 **Pro Tip:** Type `check`, `true`, or `yes` to automatically display a green check icon. Type `cross`, `false`, or `no` to automatically display a cross icon.

## 🎨 Customizing Colors

Change the **Theme** option to **Custom** to unlock advanced color controls.

You can customize colors independently for:

-   **List Table BG** — Background color for standard feature rows
    
-   **Plan Header BG** — Background color for the pricing plan header area
    
-   **Highlight BG** — Special background color for featured/highlighted plans
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #4860

## Details

- **Author**: Teddesign
- **Published**: 2026-07-10
- **Updated**: 2026-08-19
- **Added**: 2026-07-10
- **Categories**: Text

## More like this

-   [Text Reveal Effect](/component/text-reveal-effect) — Lera · $4 — Text reveal effect over "ghost" layer.
-   [Soft Heading](/component/soft-heading) — Kaisa A · Free — Animated Soft Heading in 2 colors
-   [Curved Text Marquee](/component/curved-text-marquee) — Ahmet Loca · Free — Animated Bend
-   [Type Write Effect](/component/type-write-effect) — Russet Supply · Free — Animated Text & Interactive Typing