# Comparison Table

> Compare plans or products with sticky labels and highlighted differences.

- Category: Data Display
- Kind: component
- Page: https://uaiblocks.dev/components/comparison-table
- Registry item: https://uaiblocks.dev/r/comparison-table.json
- Source: https://github.com/victor-teles/uai/blob/main/src/registry/uai/components/comparison-table.tsx

## Install

```bash
bunx shadcn@latest add https://uaiblocks.dev/r/comparison-table.json
```

## 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>
  );
}
```

## Anatomy

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

## Accessibility

- 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.