Pricing Compare Matrix

Installation

pnpm dlx shadcn@latest add @cleverui/pricing-compare-matrix

Requires the @cleverui registry in your components.json, a one-off, two-line setup.

Usage

tsx

import { PricingCompareMatrix } from '@/components/blocks/pricing-compare-matrix'

Exampletsx

import { PricingCompareMatrix } from '@/components/blocks/pricing-compare-matrix'

export default function PricingCompareMatrixDemo() {
  return (
    <PricingCompareMatrix
      heading="Compare plans"
      caption="Ledgerflow plan feature comparison"
      plans={[
        {
          name: 'Starter',
          price: '$29',
          period: 'per month',
          cta: { label: 'Start free', href: '#' },
        },
        {
          name: 'Growth',
          price: '$89',
          period: 'per month',
          cta: { label: 'Start trial', href: '#' },
          featured: true,
        },
        {
          name: 'Scale',
          price: '$249',
          period: 'per month',
          cta: { label: 'Talk to sales', href: '#' },
        },
      ]}
      groups={[
        {
          label: 'Core',
          rows: [
            { feature: 'Active workspaces', values: ['3', '15', 'Unlimited'] },
            { feature: 'Seats included', values: ['5', '25', '100'] },
            { feature: 'Invoice matching', values: [true, true, true] },
            { feature: 'Approval chains', values: [false, true, true] },
          ],
        },
        {
          label: 'Integrations',
          rows: [
            { feature: 'Bank feeds', values: ['2', 'Unlimited', 'Unlimited'] },
            { feature: 'Xero & QuickBooks', values: [true, true, true] },
            { feature: 'Custom webhooks', values: [false, true, true] },
            { feature: 'SSO / SAML', values: [false, false, true] },
          ],
        },
        {
          label: 'Support',
          rows: [
            { feature: 'Email support', values: [true, true, true] },
            { feature: 'Priority chat', values: [false, true, true] },
            { feature: 'Dedicated CSM', values: [false, false, true] },
            { feature: 'Audit log retention', values: ['30 days', '1 year', '7 years'] },
          ],
        },
      ]}
      footnote="Prices in USD, billed monthly. Annual billing saves 20%. Growth trial is 14 days, no card required."
    />
  )
}

API reference

PricingCompareMatrix accepts the following props.

Prop	Type	Default	Description
`heading`	`string`	`'Compare plans'`	–
`caption`	`string`	`'Plan feature comparison'`	semantic table caption, rendered sr-only
`plans`*	`PricingComparePlan[]`	–	–
`groups`*	`PricingCompareGroup[]`	–	–
`stickyHeader`	`boolean`	`true`	–
`footnote`	`string`	–	–

…plus everything from React.HTMLAttributes<HTMLElement>: className, event handlers, aria attributes and the rest pass straight through.

Referenced types

Typestsx

export interface PricingComparePlan {
  name: string
  /** preformatted, e.g. '$29' */
  price: string
  period?: string
  cta: { label: string; href: string }
  /** at most one, carries the primary keyline and filled CTA */
  featured?: boolean
}

export interface PricingCompareGroup {
  label: string
  rows: PricingCompareRow[]
}

export interface PricingCompareRow {
  feature: string
  /** true = check, false = dash, string = mono figure */
  values: (boolean | string)[]
}

Related components

Plan Rows Pricing

SaaS pricing as a ruled rate sheet in React and Tailwind, one hairline row per plan with inline feature inventory, mono tabular prices, and a keyline on the featured plan.

Add-on Builder Pricing

Configurable React pricing, a base plan plus real checkbox add-ons, an itemized ledger that re-rules itself as items land, and a rolling tabular total. No dark patterns.

Ledger Quote Pricing

Agency pricing set as a quote document, ruled line items with tabular mono prices, subtotal, GST and total ledger rows, and a mono valid-until note. Pricing as paperwork, not cards.

Single Plan Pricing

One-plan pricing stated with confidence, the price set as the hero figure, included features in two ruled columns, and quiet FAQ links. For products with one honest price and nothing to upsell.

Usage Pricing Slider

Usage-based pricing with an honest slider, an arrow-key accessible role=slider sets seats or volume, the price recalculates with rolling digits, and breakpoints are labelled in mono under the track.

Glow Pricing Tiers

Three quiet tiers with one accent moment, the featured plan carries a primary hairline and soft glow. Billing toggle with sprung thumb; prices crossfade on flip.

Frequently asked questions

How do I install the Pricing Compare Matrix component?

Register the @cleverui registry in your components.json ("@cleverui": "https://cleverops.com.au/r/{name}.json"), then run `npx shadcn@latest add @cleverui/pricing-compare-matrix`. The shadcn CLI copies the source into your project, you own the code from that point. You can also copy the source directly from this page.

What dependencies does Pricing Compare Matrix require?

Pricing Compare Matrix uses motion and lucide-react on top of React and Tailwind CSS. You don't need to install them manually, the shadcn CLI resolves and installs npm dependencies automatically when you add the component.

Can I theme Pricing Compare Matrix to match my brand?

Yes. The component is styled entirely with Tailwind utilities over standard design tokens (primary, background, muted, border), so it inherits your existing shadcn/ui theme automatically. Change your CSS variables and the component follows, no source edits needed for palette, radius, or fonts.

Preview & code