127 Components
Product Compare Table
CardsAligned multi-tier product comparison matrix with sticky frosted headers, check and dash indicators, highlighted tier column, and a live 'Show differences only' switch.
Compare Specifications
| Feature | Core$0 | PopularPro$29 | Scale$99 |
|---|---|---|---|
| Framer Motion Spring Primitives | |||
| CLI Registry Installation | |||
| Dark & Light Theme Tokens | |||
| Multi-Step Wizard & Command Menu | |||
| Custom Figma Design Kit | |||
| Dedicated SLA & Architecture Review | |||
| Concurrent Team Seats | 1 seat | Up to 10 | Unlimited |
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionlucide-reactclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/product-compare-table.json"
Props
TypeScript props supported by <ProductCompareTable />.
| Prop | Type | Default | Description |
|---|---|---|---|
| tiers | CompareTier[] | — | Array of product tiers ({ id, name, price, badge, highlighted }). |
| rows | CompareSpecRow[] | — | Array of specification rows mapping each tier id to a boolean or string. |
| allowDiffFilter | boolean | true | Displays the 'Show differences only' toggle bar at the top. |
| className | string | — | Additional Tailwind CSS classes for the outer table card. |
Key Features
- Sticky frosted-glass column headers (`backdrop-blur-md`) that remain pinned while scrolling specs.
- Interactive 'Show differences only' toggle switch to filter out identical rows.
- Supports boolean check/dash badges as well as custom text values per tier.
Keyboard & Accessibility
- Uses semantic `<table>`, `<thead>`, and `<tbody>` markup for screen-reader table navigation.
- Check and dash icons include explicit `aria-label` ('Included' / 'Not included').
- Differences toggle uses `role='switch'` and `aria-checked`.