Marketing block

Plan Comparison Matrix

A real table with scoped headers, a sticky first column and screen-reader text behind every check and dash.

145 lineslucide-reactAdded 8 Aug 2026Updated 11 Sept 2026

comparison
pricing
table
matrix
features

What's included

components/comparison-table.tsx
Needs lucide-react

Works with

React
Next.js
Tailwind CSS
TypeScript

npx hoverlab add comparison-table

Or over MCP, from your editor's agent — no account needed.

License

Free to read, copy and install, for personal and non-commercial projects. Shipping it in client work or a paid product needs Pro ($79 once). The source lands in your repo and stops being ours — no attribution, nothing to upgrade.

Was this useful?

Start a page with this section — add more, order them, and leave with the page source.

Preview

Compare plans

Every line, side by side.

Compare plans — features by plan
Feature	Free	ProPopular	Team
Projects	3	Unlimited	Unlimited
Commercial license	Not included	Included	Included
Full component library	Not included	Included	Included
Figma source files	Not included	Included	Included
Seats	1	1	Up to 10
SSO and audit log	Not included	Not included	Included
Support	Community	Priority email	Dedicated

Rendered live in your current theme — this is the same component whose source is below, not a screenshot of it.

Source

components/comparison-table.tsx

/**
 * <ComparisonTable> — a feature matrix across plans or competitors.
 *
 * A real <table> with a <caption> and scoped headers, so a screen reader
 * can announce "Priority support, Pro, included" instead of reading a grid
 * of disembodied checkmarks. The check and dash carry `<span class="sr-only">`
 * text for the same reason.
 *
 * The first column is sticky on small screens: a matrix you have to scroll
 * horizontally is useless once the row label has slid out of view.
 */

import * as React from 'react'
import { Check, Minus } from 'lucide-react'

/** `true`/`false` render as icons; a string renders verbatim. */
export type CellValue = boolean | string

export interface ComparisonRow {
  feature: string
  values: CellValue[]
}

export interface ComparisonTableProps {
  columns?: string[]
  rows?: ComparisonRow[]
  heading?: string
  subheading?: string
  /** Index into `columns` to emphasise. */
  highlightColumn?: number
  className?: string
}

const DEFAULT_COLUMNS = ['Free', 'Pro', 'Team']

const DEFAULT_ROWS: ComparisonRow[] = [
  { feature: 'Projects', values: ['3', 'Unlimited', 'Unlimited'] },
  { feature: 'Commercial license', values: [false, true, true] },
  { feature: 'Full component library', values: [false, true, true] },
  { feature: 'Figma source files', values: [false, true, true] },
  { feature: 'Seats', values: ['1', '1', 'Up to 10'] },
  { feature: 'SSO and audit log', values: [false, false, true] },
  { feature: 'Support', values: ['Community', 'Priority email', 'Dedicated'] },
]

export function ComparisonTable({
  columns = DEFAULT_COLUMNS,
  rows = DEFAULT_ROWS,
  heading = 'Compare plans',
  subheading = 'Every line, side by side.',
  highlightColumn = 1,
  className = '',
}: ComparisonTableProps) {
  return (
    <section className={`mx-auto w-full max-w-5xl px-4 py-16 sm:px-6 lg:px-8 ${className}`}>
      <div className="mx-auto mb-10 max-w-2xl text-center">
        <h2 className="text-balance text-3xl font-bold tracking-tight sm:text-4xl">
          {heading}
        </h2>
        {subheading ? <p className="mt-3 text-muted-foreground">{subheading}</p> : null}
      </div>

      {/*
        `relative` is load-bearing, not decoration. The cells carry `sr-only`
        labels, and `sr-only` is `position: absolute` — an overflow container
        only clips an absolutely positioned descendant when it is also that
        descendant's containing block. Without it those 1px spans laid out at
        their static position inside a table wider than this box, escaped the
        scroll port, and gave the whole PAGE a horizontal scrollbar on a phone:
        18px of sideways scroll on an enterprise landing page, pointing at
        nothing a sighted visitor could see.
      */}
      <div className="relative overflow-x-auto rounded-2xl border border-border/60">
        <table className="w-full border-collapse text-sm">
          <caption className="sr-only">
            {heading} — features by plan
          </caption>
          <thead>
            <tr className="border-b border-border/60 bg-muted/40">
              <th scope="col" className="sticky start-0 z-10 bg-muted/40 p-4 text-start font-semibold">
                Feature
              </th>
              {columns.map((col, i) => (
                <th
                  key={col}
                  scope="col"
                  className={`p-4 text-center font-semibold ${
                    i === highlightColumn ? 'text-primary' : ''
                  }`}
                >
                  {col}
                  {i === highlightColumn ? (
                    <span className="ms-1.5 rounded-full bg-primary/15 px-2 py-0.5 text-xs">
                      Popular
                    </span>
                  ) : null}
                </th>
              ))}
            </tr>
          </thead>
          <tbody>
            {rows.map((row) => (
              <tr key={row.feature} className="border-b border-border/40 last:border-0 hover:bg-muted/20">
                <th
                  scope="row"
                  className="sticky start-0 z-10 bg-background p-4 text-start font-medium"
                >
                  {row.feature}
                </th>
                {row.values.map((value, i) => (
                  <td
                    key={i}
                    className={`p-4 text-center ${
                      i === highlightColumn ? 'bg-primary/5' : ''
                    }`}
                  >
                    <Cell value={value} />
                  </td>
                ))}
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </section>
  )
}

function Cell({ value }: { value: CellValue }) {
  if (typeof value === 'string') {
    return <span className="text-muted-foreground">{value}</span>
  }
  return value ? (
    <>
      <Check aria-hidden className="mx-auto h-4 w-4 text-emerald-500" />
      <span className="sr-only">Included</span>
    </>
  ) : (
    <>
      <Minus aria-hidden className="mx-auto h-4 w-4 text-muted-foreground/40" />
      <span className="sr-only">Not included</span>
    </>
  )
}

Before you paste

Styling is Tailwind utility classes on semantic tokens (bg-card, text-muted-foreground) — it inherits your theme instead of overriding it.
Install: npm i lucide-react
Every prop has a default, so it renders standalone before you wire it up.

Where it goes

Drop it at components/comparison-table.tsx and import it where you need the section:

import { ComparisonTable } from '@/components/comparison-table'

Customize

3 of this block’s props are simple enough to drive from here. Change them and the block below re-renders — it is the same component whose source is above, not a mock of it. Everything else it accepts is in the table underneath.

Props

Read out of the component’s own type and signature, so this cannot drift from the source below. Every prop has a default — the component renders standalone before you pass it anything.

Prop	Type	Default
`columns`	`string[]`	`DEFAULT_COLUMNS`
`rows`	`ComparisonRow[]`	`DEFAULT_ROWS`
`heading`	`string`	`'Compare plans'`
`subheading`	`string`	`'Every line, side by side.'`
`highlightColumn`Index into `columns` to emphasise.	`number`	`1`
`className`	`string`	`''`

Not using React?

The same block rendered once to markup, wrapped as a file your framework compiles. Tailwind classes are framework-agnostic, so the design transfers intact — the behaviour does not.

comparison-table.html

<!--
  Plan Comparison Matrix — markup from the Hoverlab catalog.

  This is the block rendered once to HTML and wrapped as a component
  file. It is not a port of the React source: the Tailwind classes carry
  the design, which is the part that took the work, and they are the same
  in every framework.

  This block has no interactive behaviour, so nothing is missing.
-->
<section class="mx-auto w-full max-w-5xl px-4 py-16 sm:px-6 lg:px-8 ">
  <div class="mx-auto mb-10 max-w-2xl text-center">
    <h2 class="text-balance text-3xl font-bold tracking-tight sm:text-4xl">Compare plans</h2>
    <p class="mt-3 text-muted-foreground">Every line, side by side.</p>
  </div>
  <div class="relative overflow-x-auto rounded-2xl border border-border/60">
    <table class="w-full border-collapse text-sm">
      <caption class="sr-only">Compare plans — features by plan</caption>
      <thead>
        <tr class="border-b border-border/60 bg-muted/40">
          <th scope="col" class="sticky start-0 z-10 bg-muted/40 p-4 text-start font-semibold">Feature</th>
          <th scope="col" class="p-4 text-center font-semibold ">Free</th>
          <th scope="col" class="p-4 text-center font-semibold text-primary">Pro<span class="ms-1.5 rounded-full bg-primary/15 px-2 py-0.5 text-xs">Popular</span></th>
          <th scope="col" class="p-4 text-center font-semibold ">Team</th>
        </tr>
      </thead>
      <tbody>
        <tr class="border-b border-border/40 last:border-0 hover:bg-muted/20">
          <th scope="row" class="sticky start-0 z-10 bg-background p-4 text-start font-medium">Projects</th>
          <td class="p-4 text-center ">
            <span class="text-muted-foreground">3</span>
          </td>
          <td class="p-4 text-center bg-primary/5">
            <span class="text-muted-foreground">Unlimited</span>
          </td>
          <td class="p-4 text-center ">
            <span class="text-muted-foreground">Unlimited</span>
          </td>
        </tr>
        <tr class="border-b border-border/40 last:border-0 hover:bg-muted/20">
          <th scope="row" class="sticky start-0 z-10 bg-background p-4 text-start font-medium">Commercial license</th>
          <td class="p-4 text-center ">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-minus mx-auto h-4 w-4 text-muted-foreground/40" aria-hidden="true">
              <path d="M5 12h14"></path>
            </svg>
            <span class="sr-only">Not included</span>
          </td>
          <td class="p-4 text-center bg-primary/5">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check mx-auto h-4 w-4 text-emerald-500" aria-hidden="true">
              <path d="M20 6 9 17l-5-5"></path>
            </svg>
            <span class="sr-only">Included</span>
          </td>
          <td class="p-4 text-center ">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check mx-auto h-4 w-4 text-emerald-500" aria-hidden="true">
              <path d="M20 6 9 17l-5-5"></path>
            </svg>
            <span class="sr-only">Included</span>
          </td>
        </tr>
        <tr class="border-b border-border/40 last:border-0 hover:bg-muted/20">
          <th scope="row" class="sticky start-0 z-10 bg-background p-4 text-start font-medium">Full component library</th>
          <td class="p-4 text-center ">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-minus mx-auto h-4 w-4 text-muted-foreground/40" aria-hidden="true">
              <path d="M5 12h14"></path>
            </svg>
            <span class="sr-only">Not included</span>
          </td>
          <td class="p-4 text-center bg-primary/5">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check mx-auto h-4 w-4 text-emerald-500" aria-hidden="true">
              <path d="M20 6 9 17l-5-5"></path>
            </svg>
            <span class="sr-only">Included</span>
          </td>
          <td class="p-4 text-center ">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check mx-auto h-4 w-4 text-emerald-500" aria-hidden="true">
              <path d="M20 6 9 17l-5-5"></path>
            </svg>
            <span class="sr-only">Included</span>
          </td>
        </tr>
        <tr class="border-b border-border/40 last:border-0 hover:bg-muted/20">
          <th scope="row" class="sticky start-0 z-10 bg-background p-4 text-start font-medium">Figma source files</th>
          <td class="p-4 text-center ">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-minus mx-auto h-4 w-4 text-muted-foreground/40" aria-hidden="true">
              <path d="M5 12h14"></path>
            </svg>
            <span class="sr-only">Not included</span>
          </td>
          <td class="p-4 text-center bg-primary/5">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check mx-auto h-4 w-4 text-emerald-500" aria-hidden="true">
              <path d="M20 6 9 17l-5-5"></path>
            </svg>
            <span class="sr-only">Included</span>
          </td>
          <td class="p-4 text-center ">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check mx-auto h-4 w-4 text-emerald-500" aria-hidden="true">
              <path d="M20 6 9 17l-5-5"></path>
            </svg>
            <span class="sr-only">Included</span>
          </td>
        </tr>
        <tr class="border-b border-border/40 last:border-0 hover:bg-muted/20">
          <th scope="row" class="sticky start-0 z-10 bg-background p-4 text-start font-medium">Seats</th>
          <td class="p-4 text-center ">
            <span class="text-muted-foreground">1</span>
          </td>
          <td class="p-4 text-center bg-primary/5">
            <span class="text-muted-foreground">1</span>
          </td>
          <td class="p-4 text-center ">
            <span class="text-muted-foreground">Up to 10</span>
          </td>
        </tr>
        <tr class="border-b border-border/40 last:border-0 hover:bg-muted/20">
          <th scope="row" class="sticky start-0 z-10 bg-background p-4 text-start font-medium">SSO and audit log</th>
          <td class="p-4 text-center ">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-minus mx-auto h-4 w-4 text-muted-foreground/40" aria-hidden="true">
              <path d="M5 12h14"></path>
            </svg>
            <span class="sr-only">Not included</span>
          </td>
          <td class="p-4 text-center bg-primary/5">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-minus mx-auto h-4 w-4 text-muted-foreground/40" aria-hidden="true">
              <path d="M5 12h14"></path>
            </svg>
            <span class="sr-only">Not included</span>
          </td>
          <td class="p-4 text-center ">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check mx-auto h-4 w-4 text-emerald-500" aria-hidden="true">
              <path d="M20 6 9 17l-5-5"></path>
            </svg>
            <span class="sr-only">Included</span>
          </td>
        </tr>
        <tr class="border-b border-border/40 last:border-0 hover:bg-muted/20">
          <th scope="row" class="sticky start-0 z-10 bg-background p-4 text-start font-medium">Support</th>
          <td class="p-4 text-center ">
            <span class="text-muted-foreground">Community</span>
          </td>
          <td class="p-4 text-center bg-primary/5">
            <span class="text-muted-foreground">Priority email</span>
          </td>
          <td class="p-4 text-center ">
            <span class="text-muted-foreground">Dedicated</span>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</section>

This is rendered HTML, not a translation of the React source. The Tailwind classes carry the design and work in any framework.
It is one frame: the component in its initial state, with no props applied beyond the defaults.
Requires Tailwind, and the design tokens the classes reference (bg-card, text-muted-foreground, and so on). The template ZIPs ship a globals.css that defines them.

What each framework gets across the whole catalog — effects convert properly; this rung is markup.

For AI

The component, its props, the design tokens it expects and the command that installs it — as one prompt. Paste it into Claude, Cursor, v0 or ChatGPT and what they build around it will match the rest of the catalog instead of inventing its own system.

See the prompt

Used in these pages

Want the whole screen instead of this one section? Open a page and copy it entire.

7 more blocks in Pricing

All of them free to read, copy and install — no account, no locked tiles, no watermarked preview. The whole catalog is open, and so are the API and the CLI.

Browse Pricing

Shipping one commercially

Copying the code is free. Putting it in client work or a paid product is what Pro is for — the licence, not the access.

A commercial licence for everything in the catalog
Unlimited bundle exports, in Vue, Svelte and Tailwind
One payment — no subscription, nothing to renew

Pro — $79 once

More Pricing blocks

View category

Simple, honest pricing

Start free. Upgrade when it starts paying for itself.

MonthlyYearlySave 20%

Free

Everything you need to try it properly.

Free

Up to 3 projects
Community support
Core component library

Pro

For working developers shipping real products.

$19/month

Unlimited projects
Commercial license
The full library
Priority email support
Figma source files

Team

Shared access and billing for a whole team.

$49/month

Everything in Pro
Up to 10 seats
Shared component presets
SSO and audit log
Invoice billing

Three-Plan Pricing Toggle

Three plans with a monthly/yearly switch, yearly prices derived from the monthly figure so the two can never disagree.

Pricing192 lines1 dep11 Sept

One price, paid once

No subscription, no seat count, no tier above this one to discover later.

Pro

$79one-time

Get Pro

The licence to ship what you have is permanent. What runs for twelve months is access to components published after you buy — nothing you already copied stops working, and nothing checks at runtime.

What is included

Every effect, block, page and template
Unlimited projects, including client work
Twelve months of catalog updates
CLI, MCP server and public API
No seat fee on people who see what you ship
No attribution required, ever

Single-Plan Price Card

One price given a whole card, with the objection a one-time price raises answered under the button rather than in a FAQ further down.

Pricing145 lines1 dep10 Sept

Tiered Usage Calculator

A slider that turns a rate card into the number a buyer actually cares about, with a per-tier breakdown so the total can be checked rather than taken on trust.

Pricing224 linesNo deps13 Sept

Credits

Buy what you need, once

No plan to join and nothing that renews. Top up whenever the balance runs low, or never again.

One credit is one generation at standard quality. High quality costs four.

500 credits
$5
$0.010 per credit
Enough to finish an evaluation.
Buy 500
Most bought
2,000 credits
$15Save 25%
$0.0075 per credit
What a working month looks like for one person.
Buy 2,000
10,000 credits
$60Save 40%
$0.006 per credit
For a small team, or a batch job with a deadline.
Buy 10,000

Credits never expire
No subscription, no card kept on file
Unused credits are refundable for 30 days

Prepaid Credit Packs

One-time packs with the per-credit price worked out for the reader and the saving stated rather than implied — the pricing shape for a product that sells quantity, not a subscription.

Pricing218 lines1 dep11 Sept

Change your plan

Changes take effect immediately. Downgrades credit the unused remainder against your next invoice.

In-App Plan Picker

A native radiogroup of plans with the current one disabled and the prorated charge announced as it changes — the upgrade dialog, not the marketing table.

Pricing242 lines1 dep2 Sept

Why this price

Cheaper than the week you would spend instead

A price defends itself against the alternative, not against a competitor's price. The alternative here is engineering time, so that is the unit.

One section, hand-builtHalf a day for the markup, another for the responsive and keyboard passes.
The same section hereOne command, and the accessibility decisions are already made and explained.
Where it stops being closeAround the fourth section. Before that, honestly, build it yourself.
What you are not buyingA dependency. The source lands in your repository and stops being ours.

Pricing Value Split

The case for the price, made beside the price — what the alternative costs, in the units a buyer already measures.

Pricing158 linesNo deps

What runs out, and what happens then

Pricing tables list what a plan includes. They rarely say what happens at the limit, which is the thing that decides whether a limit is survivable.

Plan Limits List

What actually runs out on each plan, including what happens when it does — the row a pricing table leaves off.

Pricing149 linesNo deps10 Sept