Raised column

Comparison table with a raised card column.

Usage

import { ComparisonSpotlight } from '@/components/blocks/comparison-05'


<ComparisonSpotlight />


// Rich cells take a title and bullets. A boolean or string also works for simple rows.
<ComparisonSpotlight
  heading="Why teams switch."
  product={{ name: 'Acme', logo: <AcmeLogo /> }}
  competitor={{ name: 'Spreadsheets' }}
  rows={[
    {
      label: 'Live collaboration',
      ours: { title: 'Everyone in one file', bullets: ['Cursors and comments', 'No merge conflicts'] },
      theirs: false,
    },
    { label: 'Version history', ours: 'Every change, forever', theirs: null },
    { label: 'Exports to CSV', ours: true, theirs: true },
  ]}
/>

Install

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

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

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

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

Source

Props

Raised column props
Prop	Type	Default	Description
eyebrow	string	= 'Pennyroot vs. the rest'	Small label above the heading. Pass an empty string to hide it.
heading	string	= 'Expenses that sort themselves out.'	Section heading.
description	string	= A line about Pennyroot	Muted line under the heading. Pass an empty string to hide it.
product	{ name: string; logo?: ReactNode }	= { name: 'Pennyroot', logo: <PennyrootMark /> }	Name and optional logo shown at the top of the raised card.
competitor	{ name: string }	= { name: 'Legacy expense tools' }	Header of the competitor column.
rows	SpotlightRow[]	= 5 sample rows	Rows with a label, ours and theirs. ours is { title, bullets? }, a string (check plus one line) or a boolean. theirs is true (check), false (cross), null (dash) or a short string.
className	string	= —	Additional classes for the section.
style	CSSProperties	= —	Inline styles, handy for overriding the --pp-* color variables.