Old Way vs New Way
Features
Source and install need .
pnpm dlx shadcn@latest add @assembli/competitor-comparisonCompetitor Comparison
“Us vs them” comparison table: your product in a raised column with its price and call to action beside the alternatives. Grouped rows show yes, partial and no glyphs or short text, with cell notes gathered into numbered footnotes. A Differences only switch hides rows where everyone matches, and on phones a switcher picks which alternative sits beside yours.
Props
Other props pass through to the root element.
eyebrow
React.ReactNode
Default
"Compare"title
React.ReactNode
Default
"How we stack up"intro
React.ReactNode
products*
ComparisonProduct[]
Your product first; it gets the raised column. The rest are the alternatives, in order.
groups*
ComparisonGroup[]
cta
{ label: string; href: string }
source
React.ReactNode
Small print under the table, e.g. where the data came from and when.
| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | React.ReactNode | "Compare" | |
| title | React.ReactNode | "How we stack up" | |
| intro | React.ReactNode | – | |
| products* | ComparisonProduct[] | – | Your product first; it gets the raised column. The rest are the alternatives, in order. |
| groups* | ComparisonGroup[] | – | |
| cta | { label: string; href: string } | – | |
| source | React.ReactNode | – | Small print under the table, e.g. where the data came from and when. |
