Feature matrix

Feature matrix comparing against three rivals.

Usage

import { ComparisonMatrix } from '@/components/blocks/comparison-04'


<ComparisonMatrix />


// Your product, rivals and rows. Values go ours first, then one per competitor.
// true is a check, false a cross, null a dash, and a string renders as text.
<ComparisonMatrix
  heading="How does Acme compare?"
  product={{ name: 'Acme', logo: <AcmeLogo /> }}
  competitors={[{ name: 'Other app' }, { name: 'Spreadsheets' }]}
  rows={[
    { label: 'Live collaboration', icon: 'routing', values: [true, true, false] },
    { label: 'Seats included', icon: 'tag', values: ['Unlimited', '5', null] },
  ]}
/>

Install

pnpm dlx shadcn@latest add @pastaui-pro/comparison-04

npx shadcn@latest add @pastaui-pro/comparison-04

yarn dlx shadcn@latest add @pastaui-pro/comparison-04

bunx --bun shadcn@latest add @pastaui-pro/comparison-04

Source

Props

Feature matrix props
Prop	Type	Default	Description
eyebrow	string	= 'Compare'	Small label above the heading.
heading	string	= 'How does Formsmith compare to others?'	Section heading.
description	string	= A line about Formsmith	Muted line under the heading. Pass an empty string to hide it.
product	{ name: string; logo?: ReactNode }	= { name: 'Formsmith', logo: <FormsmithMark /> }	Your product, shown in the outlined and tinted column.
competitors	{ name: string; logo?: ReactNode }[]	= Pollster, Inputly and Surveyo	The other columns, each with a name and an optional small logo mark.
rows	MatrixRow[]	= 7 sample rows	Rows with a label, an optional icon ('routing', 'card', 'paperclip', 'globe', 'shield', 'inbox' or 'tag') and values: ours first, then one per competitor. Each value is true (included), false (not included), null (not available) or a string.
className	string	= —	Additional classes for the section.
style	CSSProperties	= —	Inline styles, handy for overriding the --pp-* color variables.