# Comparison table (goodtabs UI)

A two-column table of without against with, in real table markup.

## Install

```bash
npx shadcn@latest add https://ui.goodtabs.co/r/comparison-table.json
```

Or, with the @goodtabs namespace configured in components.json: `npx shadcn@latest add @goodtabs/comparison-table`

## Usage

```tsx
import { ComparisonTable } from "@/components/comparison-table"

<ComparisonTable caption="By hand against the library" rows={[{ label: "Setup", without: "A day", with: "One command" }]} />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| rows | `{ label: string; without: string | boolean; with: string | boolean }[]` |  | One row per thing compared. A boolean renders a check or a dash. |
| withoutLabel | `string` | `"Without"` | Heading of the left value column. |
| withLabel | `string` | `"With"` | Heading of the right value column. |
| caption | `string` |  | Caption kept for screen readers. |

## When to use

- Showing what changes with a product, row by row
- A free against Pro matrix of two columns
- Landing pages where bullets do not make the contrast clear

## When not to use

- More than two options, which need a pricing table
- Long prose in cells
- Data tables with sorting

## Notes for agents

- Server component on the shared table primitive; scope attributes are set on every header
- Right column is foreground and weighted, left is muted, so the win reads first
- Boolean values render icons with sr-only Yes or No text
- Wraps in horizontal scroll below 20rem via the table container

Docs: https://ui.goodtabs.co/components/comparison-table