Comparison table

An us versus them table with a sticky header, a highlighted column, and a stacked phone view.

$npx shadcn@latest add @silicon-ui/comparison-table

Installation

$npx shadcn@latest add @silicon-ui/comparison-table

Install the dependencies.
$npm install lucide-react motion
Copy these files into your project. Shared files are skipped if you already have them.
- components/silicon-ui/blocks/comparison-table/comparison-table.tsx
- components/silicon-ui/blocks/comparison-table/comparison-table-data.ts
- components/silicon-ui/blocks/comparison-table/comparison-table.module.css
Install the foundation once per app for the design and motion tokens: $npx shadcn@latest add @silicon-ui/silicon-foundation

Source codetsx

import { ComparisonTable } from "@/components/silicon-ui/blocks/comparison-table/comparison-table";

Prop	Type	Default
`title`	`string`	`"How Relay compares"`
`description`	`string`	`"Everything a growing team needs, without the enterprise price or the spreadsheet sprawl."`
`columns`	`ComparisonColumn[]`	`comparisonColumns`
`sections`	`ComparisonSection[]`	`comparisonSections`
`differencesOnly` Hide rows where every visible column has the same value (controlled).	`boolean`	—
`defaultDifferencesOnly`	`boolean`	`false`
`onDifferencesOnlyChange`	`(value: boolean) => void`	—
`compareWith` Competitor shown beside yours in the stacked phone layout (controlled).	`string`	—
`onCompareWithChange`	`(id: string) => void`	—
`cta` Call to action in your column.	`{ label: string; href?: string; onClick?: () => void; doneLabel?: string }`	—
`stickyTop` Offset for the sticky header, such as the height of a fixed site header. Defaults to 0.	`number`	`0`
`maxHeight` Caps the table height and scrolls it inside the block, with the header sticking to its top.	`number \| string`	—
`stackBelow` Width below which the table stacks into a two column comparison. Defaults to 640.	`number`	`640`
`className`	`string`	—