# Comparison

> A table that compares your product with other ways of doing the job, with a dot, a ring, or a dash for included, manual, and missing.

- Name: `comparison`
- Status: beta
- Categories: comparison, table, marketing
- Files: the install writes `comparison.tsx`, and any part files named `comparison-*.tsx`, to your `components` alias, `@/components` by default. Edit them freely. They are yours.
- Gallery: https://arbokui.com/website/comparison
- Registry item: https://arbokui.com/r/comparison.json

## Install

1. Add the registry to `components.json`. Do this first, once:

   ```bash
   npx shadcn@latest registry add "@arbokui=https://arbokui.com/r/{name}.json"
   ```

   The command writes this entry. You can also add it by hand:

   ```json
   {
     "registries": {
       "@arbokui": "https://arbokui.com/r/{name}.json"
     }
   }
   ```

   Without this step, the shadcn CLI looks up `@arbokui` in a public list that Arbokui does not control.

2. Add the theme once per app. It replaces your color tokens with ones checked for contrast:

   ```bash
   npx shadcn@latest add @arbokui/theme
   ```

3. Add the website component. It also adds every component it uses:

   ```bash
   npx shadcn@latest add @arbokui/comparison
   ```

## Use it for

- A landing or pricing page, to show what people get with you and what they do by hand without you.
- Two to four columns. Set \`highlight\` on your own, so it sits on a white panel.
- Name the jobs people do in each row, not your feature names: "Reminders to whoever hasn't answered".
- Explain what partial means in \`note\`.

## Avoid it for

- Naming a competitor's product unless your claims about it are true and current. Compare ways of working instead.
- Prices or numbers in cells. Use a Table, or Pricing.
- More than about twelve rows. Keep the ones that decide the choice.

## Props

- `columns`: `{ label: string; icon?: ReactNode; highlight?: boolean }[]`. The products or ways of working, left to right. Labels must be unique, since each one is a key.
- `rows`: `{ label: string; icon?: ReactNode; values: ("yes" | "partial" | "no")[] }[]`. The jobs, top to bottom, with one value per column. A missing value reads as no. Labels must be unique.
- `rowsLabel`: `string`. Default `"Feature"`. The heading over the row labels.
- `legend`: `{ yes: string; partial: string; no: string }`. Default `{ yes: "Included", partial: "Manual work", no: "Not included" }`. The words for each mark, in the legend and for screen readers.
- `note`: `ReactNode`. A small line under the table.
- `label`: `string`. Default `"Comparison"`. The name screen readers give the table's box. Give each table on a page its own.
- `className`: `string`. Extra classes on the root, which holds the container query.

## Accessibility

- It is a real table, with column and row headers, so screen readers announce each cell's row and column.
- Each mark is aria-hidden, and its legend word sits beside it as screen reader text.
- The marks differ by shape as well as color: a filled dot, a ring, and a red dash.
- The marks use each tone's text color, which every theme must pass at 4.5:1 on muted and card.
- On a narrow screen the table scrolls sideways. Its box is a named region that takes focus, so the keyboard can scroll it.
- In forced colors the gray panel gets a border, so its edge still shows when its fill is painted away.
- In forced colors the dot and dash take the text color, and your highlighted column is outlined instead of sitting on a white panel.

## Examples

### You against doing it by hand

```tsx
<Comparison
  rowsLabel="Team task"
  columns={[
    { label: "Workspace", highlight: true },
    { label: "Shared table" },
    { label: "Group chat" },
  ]}
  rows={[
    { label: "Who's coming", values: ["yes", "partial", "partial"] },
    { label: "Reminder emails", values: ["yes", "no", "no"] },
  ]}
  note="Manual work means the team keeps the record itself."
/>
```