SaaS

Plan Comparison Table

A feature-by-feature comparison table for subscription plans, with sticky headers and differences-only filtering.

Overview

Plan Comparison Table presents every feature of every subscription plan in a structured, scannable grid. Features can be grouped into sections, anchor-linked to detailed documentation, and filtered to show only the differences between plans. The header row is sticky and carries a CTA per plan so the user can act without scrolling back to the top.

The component is composed from five primitives that you can use directly when you need finer control: PlanComparisonTableHeader, PlanComparisonTableSectionHeader, PlanComparisonTableRowHeader, and PlanComparisonTableRowValue.

Key Business & UX Benefits

A "show differences only" filter cuts the table down to the rows that drive the decision, which keeps prospects from drowning in shared features.
Sticky headers with a CTA per plan let prospects sign up the moment they spot the right tier, without scrolling back through dozens of rows.
Anchor-linked feature names give sales and marketing a place to deep-link into specific capabilities from external collateral, supporting outbound campaigns.
Composing the table from named primitives lets teams ship pricing experiments or vertical-specific layouts without forking the whole table.

Pro-Tip from Larry: Pair the comparison table with a PlanCardSlider near the top of the page. The cards give a quick-glance comparison; the table is for prospects who want to scan every feature.

Usage

LPlanComparisonTable

Feature List

Rows expose a hasDifference flag so a 'show differences only' filter can hide shared rows without rebuilding the dataset
Section objects carry a title, description, icon, and optional anchor so feature groups can be deep-linked from marketing pages
Each row supports sub-features rendered as boolean check icons per plan, perfect for nested capability matrices
Sticky header row keeps the per-plan ctaLink button reachable while scrolling long comparison lists
Row values can carry a linkText and linkHref so individual features open into documentation or sales pages
Composed from named primitives (Header, SectionHeader, RowHeader, RowValue) for teams that need to assemble custom layouts
highlight flag on a row value renders the title as rainbow gradient text to call out flagship capabilities

API Reference

LPlanComparisonTable

Prop	Default	Type
`plans`required		`PlanComparisonTablePlan[] { key, name, ctaLink }`
`sections`required		`PlanComparisonTableSection[] { title, description, icon, 2 more }`
`showChoosePlan`		`boolean`

LPlanComparisonTableHeader

Prop	Default	Type
`plans`required		`PlanComparisonTablePlan[] { key, name, ctaLink }`
`showChoosePlan`		`boolean`
`compareDifferences`		`boolean`
`activeMobilePlan`		`string`

Event	Type
`update:compareDifferences`	`(event: "update:compareDifferences", value: boolean \| undefined): void`
`update:activeMobilePlan`	`(event: "update:activeMobilePlan", value: string \| undefined): void`

LPlanComparisonTableRowHeader

Prop	Default	Type
`title`required		`string`
`description`required		`string` Rendered below title
`hasDifference`required		`boolean` Indicate that all values are the same for all plans. Used for comparing differences between plans.
`titleHref`		`string` If set, the whole cell is a link
`subFeatures`		`string[]` Each string is rendered as a single text line to indicate sub-features
`values`		`Record<string, PlanComparisonTableRowValue>`

LPlanComparisonTableRowValue

Prop	Default	Type
`title`		`string`
`description`		`string`
`highlight`		`boolean` Renders the title as rainbow text
`linkText`		`string`
`linkHref`		`string`
`subFeatures`		`boolean[]` Each string is rendered as a single text line to indicate sub-features

LPlanComparisonTableSectionHeader

Prop	Default	Type
`title`required		`string`
`description`required		`string`
`icon`required		`string`
`anchor`		`string`
`rows`		`PlanComparisonTableRow[] { title, titleHref, description, 3 more }`

Edit this pageorReport an issue

Plan Card Slider

A responsive grid of Plan Cards on desktop with a mobile swipe carousel.

Shop

The Shop package provides shopping UI building blocks for product discovery and merchandising, including product cards, sliders, grids, and in-page navigation patterns.