Feature Compare Matrix: React + Tailwind Component

A plan feature comparison table with a sticky first column and header, highlighted difference rows, and animated checks and crosses.

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.

Bring this into your project

Run this command in your project folder. The CLI adds the source and dependencies; then follow the usage example below.

npx webberui@latest add "https://webberui.com/r/feature-compare-matrix.en.json?t=<install token>"

New project or installation trouble? Start here →

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

Show the diff-only toggleshowDiffToggle

Diff-only by defaultdefaultDiffOnly

Max scroll heightmaxHeight

440

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

Active edited usageDefault props

<FeatureCompareMatrix/>

    </div>
  );
}

The complete example includes the preview layout and data. Install the component first, then paste this file into your project.

Installation

npx webberui@latest add "https://webberui.com/r/feature-compare-matrix.en.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 additional sr-only text ("Included" / "Not included") for screen readers
The "Differences only" toggle is a role="switch" reporting its aria-checked state
The scroll area is keyboard focusable (tabIndex=0 with an aria-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

Feature Compare Matrix