Pricing Comparison Table

Overview

Renders a table with tier headers (including optional prices) and feature rows grouped by category. Boolean values show check/X icons; strings display as text. Supports highlighting a recommended tier with a ring and background accent.

Usage

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

Default

Three tiers with multiple feature categories.

Highlight Pro tier

Set highlightTier to a tier key to draw attention with a ring and background accent.

Highlight Enterprise tier

Two tiers

Simple Free vs Pro comparison.

Without prices

Tiers without the price field — header shows label only.

Single category

Dark mode

Highlight Pro — dark mode

Two tiers — dark mode

Props

TierDefinition

FeatureCategory

FeatureRow

Notes

• Boolean true renders a check icon; false renders an X icon.
• highlightTier applies ring-2 ring-primary on the header and bg-primary/5 on cells.
• Category rows span the full width with a muted background for visual grouping.
• The table is horizontally scrollable on small screens (min-w-[640px]).
• Dark mode: pass colorScheme="dark" or place inside a .dark ancestor.