# Comparison Table

Plans as columns with the home column washed, grouped features, yes, no and partial marks, and a switch for only differences.

Tier: Free

## Installation

```bash
npx shadcn add @fetaui/comparison-table
```

## Usage

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

export function Example({ plans, groups }) {
  return <ComparisonTable title="How Bitter compares" plans={plans} groups={groups} />
}
```

## API

| Prop | Type | Default |
|---|---|---|
| title | string | required |
| subtitle | ReactNode |  |
| plans | ComparisonPlan[] | required |
| groups | ComparisonGroup[] | required |
| defaultDifferences | boolean | false |
| animated | boolean | true |

## When to use

- On a pricing or competitor page.

## When not to use

- For choosing a plan in a product: use Plan Card.

## Accessibility

- A real table with column, row and group headers.
- Marks are icons with Yes, No and Partial labels.
- Text keeps 4.5:1 and marks 3:1.

## Motion

- The panel fades in and rises 8 px over 400 ms, once.
- Rows fade in over 240 ms with a 40 ms stagger.
- Numbers and bars tween over 240 ms by writing text and transforms, so React does not render per frame.
- With reduced motion, the panel appears in place and values swap at once.