Feature Comparison Table

Overview

Renders a responsive table with feature rows and plan/product columns. Boolean values display check or X icons; string values display as text. An optional highlighted column draws attention to a preferred plan.

Usage

import { FeatureComparisonTable } from "@leanicon/web-builder-library";

Default

Three-column comparison with no highlighted column.

Highlight Pro column

Set highlightColumn to a column key to apply a subtle background highlight.

Highlight Enterprise column

Mixed values (boolean + string)

Combines check/X icons with text values in the same table.

Two columns

Simple Free vs Paid comparison.

Boolean only

All values are boolean — no text values.

Dark mode

Highlight Enterprise — dark mode

Two columns — dark mode

Mixed values — dark mode

Props

ComparisonFeature

ComparisonColumn

Notes

• Boolean true renders a check icon; false renders an X icon.
• String values render as plain text in the cell.
• The table is horizontally scrollable on small screens (min-w-[640px]).
• highlightColumn applies bg-primary/5 to the header and all cells in that column.
• Dark mode: pass colorScheme="dark" or place inside a .dark ancestor.