Skip to content

Plan matrix

Plan comparison matrix with tinted columns.

Usage

Usage
import { PlanMatrixComparison } from '@/components/blocks/comparison-03'


<PlanMatrixComparison />


// Your own plans and rows. true is Included, false is Not included, null is Not available.
<PlanMatrixComparison
  heading={['Compare', 'plans']}
  description="Everything each plan includes, in one table."
  plans={[
    { name: 'Solo', blurb: 'For one maker' },
    { name: 'Team', blurb: 'For small teams', popular: true },
    { name: 'Scale', blurb: 'For many teams' },
  ]}
  features={[
    { label: 'Projects', values: [3, 20, 'Unlimited'], unit: 'projects' },
    { label: 'Exports', values: [true, true, true] },
    { label: 'Audit log', values: [null, false, true] },
  ]}
/>

Install

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

Source

Props

Plan matrix props
PropTypeDefaultDescription
heading[string, string]= ['Every plan,', 'side by side']Two-part heading. The first part is ink, the second muted grey.
descriptionstring= 'See what Folio, Studio and Estate each include, one feature at a time.'Muted line under the heading.
plans{ name: string; blurb?: string; popular?: boolean }[]= Folio, Studio and EstateMatrix columns, headed by the plan name and an optional one-line blurb. A popular plan gets the blue tint; the others alternate two neutral tints.
features{ label: string; values: (boolean | number | string | null)[]; unit?: string }[]= Ten docs featuresMatrix rows with one value per plan. true shows a tinted check dot, false a dash, null a faint dash, and numbers or strings show as text. unit is read after numbers for screen readers.
brand / eyebrowstring= 'Nibwright' / 'Plans for docs teams'Wordmark and small label above the heading.
featuresTitle / captionstring= 'Key features' / 'Features included in each Nibwright plan'Matrix title and the screen-reader table caption.
classNamestring= —Additional classes for the section.
styleCSSProperties= —Inline styles, handy for overriding the --pp-* color variables.