Feature Compare Matrix
A plan feature comparison table with a sticky first column and header, highlighted difference rows, and animated checks and crosses.
This is a WebberUI Pro component
Free during the launch campaign: sign up or sign in, then hit “Copy install command” in the preview above and it installs straight away — no payment, no credit card. The command below returns 401 while you are signed out.
A complete plan feature comparison section: both the feature name column on the left and the plan row along the top are sticky, so you never lose your place while scrolling. Cells support stroke-animated checks/crosses as well as text values, rows reveal with a stagger, the "Differences only" control in the top-right filters out rows where every plan is the same (with a collapse-and-fill animation), and the recommended plan gets an accent background down its entire column.
npx shadcn@latest add "https://webberui.com/r/feature-compare-matrix.json?t=<install token>"Playground
Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.
<FeatureCompareMatrix />
Installation
npx shadcn@latest add "https://webberui.com/r/feature-compare-matrix.json?t=<install token>"Or, once registries are configured in components.json, install it as @webberui/feature-compare-matrix.
Usage
import { FeatureCompareMatrix } from "@/components/ui/feature-compare-matrix";
<FeatureCompareMatrix
plans={[
{ name: "Starter", price: "NT$0" },
{ name: "Pro", price: "NT$320/mo", highlighted: true },
]}
features={[
{ label: "Custom domain", values: [false, true] },
{ label: "Version history", values: ["7 days", "Unlimited"] },
]}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
plans | ComparePlan[] | — | List of plans (the table's columns); 2–4 is recommended |
features | CompareFeature[] | — | List of features (the table's rows) |
showDiffToggle | boolean | true | Whether to show the "Differences only" toggle in the top-right corner |
defaultDiffOnly | boolean | false | Default state of "Differences only" |
maxHeight | number | 440 | Maximum height of the scroll area (px); past that it scrolls vertically while the header stays sticky |
className | string | — | Forwarded to the outermost container |
ComparePlan:
| Field | Type | Description |
|---|---|---|
name | string | Plan name, shown in the header |
price | string? | Price text, shown below the plan name |
highlighted | boolean? | Recommended plan: accent background down the whole column plus a "Recommended" badge in the header |
CompareFeature:
| Field | Type | Description |
|---|---|---|
label | string | Feature name, shown in the sticky first column |
values | (boolean | string)[] | Value for each plan, in the same order as plans: a boolean renders a check/cross, a string renders text, and a missing value counts as not included |
Accessibility
- The table marks up its structure with the ARIA roles
table/row/columnheader/rowheader/cell, and the check and cross icons carry additionalsr-onlytext ("Included" / "Not included") for screen readers - The "Differences only" toggle is a
role="switch"reporting itsaria-checkedstate - The scroll area is keyboard focusable (
tabIndex=0with anaria-label), so the table can be scrolled with the arrow keys - When the user has "reduce motion" enabled at the system level, the row-by-row reveal, the check/cross stroke animation, and the collapse-and-fill animation are disabled and the content is shown complete right away
Pricing Calculator
An interactive pricing section that computes the monthly bill live from a usage slider and recommends a plan automatically.
Hero Collection 01
Three animated hero sections — a drifting gradient mesh, a canvas particle field, and per-character split text — sharing one content API, with the content revealing in sequence as it enters the viewport.