How we compare

Comparison table with a blue-tinted column.

Usage

import { ComparisonTable } from '@/components/blocks/comparison-01'


<ComparisonTable />


// Bring your own brand and rows. true renders a check, false a cross.
<ComparisonTable
  heading="Why teams switch."
  brand={{ name: 'Acme', logo: <AcmeLogo /> }}
  competitor="Spreadsheets"
  rows={[
    { label: 'Setup time', ours: '5 minutes', theirs: 'A week' },
    { label: 'Live collaboration', ours: true, theirs: false },
  ]}
/>

Install

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

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

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

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

Source

Props

How we compare props
Prop	Type	Default	Description
heading	string	= 'How we compare.'	Section heading.
description	string	= A line about Glossa	Muted line under the heading. Pass an empty string to hide it.
brand	{ name: string; logo?: ReactNode }	= { name: 'Glossa', logo: <GlossaMark /> }	Name and optional logo shown in the header of your highlighted column.
competitor	string	= 'Translation agencies'	Header of the grey comparison column.
rows	ComparisonRow[]	= 6 sample rows	Rows with a label plus ours and theirs values. Each value is a string, or a boolean that renders a check (true) or a cross (false).
className	string	= —	Additional classes for the section.
style	CSSProperties	= —	Inline styles, handy for overriding the --pp-* color variables.