Comparison Table

Install

Install manually View source on GitHub

Anatomy

ComparisonTable
ComparisonTableHeader
ComparisonTableTitle
ComparisonTableDifferencesToggle
ComparisonTableContent
ComparisonTableHead
ComparisonTableCorner
ComparisonTableColumn
ComparisonTableBody
ComparisonTableRow
ComparisonTableRowHeader
ComparisonTableCell
ComparisonTableCheck

Accessibility4 checks

A native table with column and row headers; the scroll container is a labelled, focusable region for keyboard scrolling.
Row labels stay sticky while scrolling sideways, and header cells stay sticky while scrolling down.
Highlighted rows add a visible Differs label, and check marks expose Included or Not included text.
Consumers mark differing rows; the table does not compare cell content itself.

Data display

Compare plans

Highlight differences

Feature	Starter	RecommendedTeam	Business
Monthly priceDiffers	$0	$12 per seat	$24 per seat
Unlimited projects	Included	Included	Included
Version historyDiffers	7 days	90 days	Unlimited
SAML single sign-onDiffers	Not included	Not included	Included
Email support	Included	Included	Included

Code example

usage.tsx

import {  ComparisonTable,  ComparisonTableBody,  ComparisonTableCell,  ComparisonTableCheck,  ComparisonTableColumn,  ComparisonTableContent,  ComparisonTableCorner,  ComparisonTableDifferencesToggle,  ComparisonTableHead,  ComparisonTableHeader,  ComparisonTableRow,  ComparisonTableRowHeader,  ComparisonTableTitle,  type ComparisonTableVariant,} from "@/components/ui/uai/comparison-table";export function ComparisonTablePreview({  variant = "bordered",}: {  variant?: ComparisonTableVariant;}) {  return (    <ComparisonTable variant={variant} defaultHighlightDifferences>      <ComparisonTableHeader>        <ComparisonTableTitle>Compare plans</ComparisonTableTitle>        <ComparisonTableDifferencesToggle />      </ComparisonTableHeader>      <ComparisonTableContent>        <ComparisonTableHead>          <ComparisonTableCorner>Feature</ComparisonTableCorner>          <ComparisonTableColumn>Starter</ComparisonTableColumn>          <ComparisonTableColumn recommended>Team</ComparisonTableColumn>          <ComparisonTableColumn>Business</ComparisonTableColumn>        </ComparisonTableHead>        <ComparisonTableBody>          <ComparisonTableRow different>            <ComparisonTableRowHeader>Monthly price</ComparisonTableRowHeader>            <ComparisonTableCell>$0</ComparisonTableCell>            <ComparisonTableCell>$12 per seat</ComparisonTableCell>            <ComparisonTableCell>$24 per seat</ComparisonTableCell>          </ComparisonTableRow>          <ComparisonTableRow>            <ComparisonTableRowHeader>Unlimited projects</ComparisonTableRowHeader>            <ComparisonTableCell>              <ComparisonTableCheck value />            </ComparisonTableCell>            <ComparisonTableCell>              <ComparisonTableCheck value />            </ComparisonTableCell>            <ComparisonTableCell>              <ComparisonTableCheck value />            </ComparisonTableCell>          </ComparisonTableRow>          <ComparisonTableRow different>            <ComparisonTableRowHeader>Version history</ComparisonTableRowHeader>            <ComparisonTableCell>7 days</ComparisonTableCell>            <ComparisonTableCell>90 days</ComparisonTableCell>            <ComparisonTableCell>Unlimited</ComparisonTableCell>          </ComparisonTableRow>          <ComparisonTableRow different>            <ComparisonTableRowHeader>SAML single sign-on</ComparisonTableRowHeader>            <ComparisonTableCell>              <ComparisonTableCheck value={false} />            </ComparisonTableCell>            <ComparisonTableCell>              <ComparisonTableCheck value={false} />            </ComparisonTableCell>            <ComparisonTableCell>              <ComparisonTableCheck value />            </ComparisonTableCell>          </ComparisonTableRow>          <ComparisonTableRow>            <ComparisonTableRowHeader>Email support</ComparisonTableRowHeader>            <ComparisonTableCell>              <ComparisonTableCheck value />            </ComparisonTableCell>            <ComparisonTableCell>              <ComparisonTableCheck value />            </ComparisonTableCell>            <ComparisonTableCell>              <ComparisonTableCheck value />            </ComparisonTableCell>          </ComparisonTableRow>        </ComparisonTableBody>      </ComparisonTableContent>    </ComparisonTable>  );}

Manual installation

comparison-table.tsx

Loading component source…