Pricing Comparison

A feature-by-feature pricing matrix: rows are features, columns are plans, and each cell is a check, a minus or a value. Group rows into sections, highlight the recommended plan, and hang a tooltip off any row.

Compare plans	Starter $0/mo	ProPopular $29/mo	Enterprise Custom
Projects & team
Projects	5	Unlimited	Unlimited
Team members	3	Unlimited	Unlimited
Storage	1 GB	100 GB	1 TB
Support & security
Community support	Included	Included	Included
Priority support	Not included	Included	Included
SSO & SAML	Not included	Not included	Included
Dedicated manager	Not included	Not included	Included

Installation#

# One-time setup (tokens + lib helpers)
npx koalaui-cli@latest init

# Activate your Pro license (once per machine)
npx koalaui-cli@latest login <key>

# Add this component (its dependencies come along)
npx koalaui-cli@latest add pricing-comparison

Usage#

This example is part of Koala UI Pro

The preview is yours to explore. Its code comes with a Pro license, paid once and used in every project.

Get the code

Have a license? Unlock it here

Anatomy#

import {
  PricingComparison,
  PricingComparisonHeader,
  PricingComparisonPlan,
  PricingComparisonSection,
  PricingComparisonRow,
  PricingComparisonCell,
} from "@/components/ui/pricing-comparison"

<PricingComparison>
  <PricingComparisonHeader>
    <PricingComparisonPlan name="…">…</PricingComparisonPlan>
  </PricingComparisonHeader>
  <PricingComparisonSection title="…">
    <PricingComparisonRow label="…">
      <PricingComparisonCell />
    </PricingComparisonRow>
  </PricingComparisonSection>
</PricingComparison>

Cell states#

A PricingComparisonCell is one of three things. Pass a value as children for a literal like 100 GB or Unlimited (rendered tabular-nums so columns align). With no children it draws a success check, or a muted minus when included={false}. Every glyph cell also carries an SR-only "Included" / "Not included" label.

Feature	Monthly $29/mo	Annual $23/mo
Billed	Monthly	Yearly
Effective price	$348/yr	$276/yr
Cancel anytime	Included	Included
Price lock	Not included	Included

Centered headers and marks#

align="center" on the root puts every plan header on its column's axis, the same one as the checks and values under it, so a matrix without CTAs (a versus table, a plan overview) reads as labelled columns. It is set once on the root, so the columns can never disagree. The default, start, keeps the name and price on a left edge over full-width buttons. icon on a plan adds a mark above its name: a plan glyph here, a product logo in a versus matrix like the one in Migrating from shadcn/ui. It is decorative; the name stays the column's label.

Feature	Starter $0/mo	Pro $29/mo	Enterprise Custom
Projects	5	Unlimited	Unlimited
Priority support	Not included	Included	Included
SSO & SAML	Not included	Not included	Included

Row hints#

Add a hint to any PricingComparisonRow to append an info glyph beside the feature name. It reveals the detail in a tooltip on hover or focus, so terse row labels stay scannable while the caveats and limits stay one hover away. Set hintLabel to name the trigger for assistive tech (defaults to "More information").

This example is part of Koala UI Pro

The preview is yours to explore. Its code comes with a Pro license, paid once and used in every project.

Get the code

Have a license? Unlock it here

API reference#

PricingComparison

The matrix root: a horizontally scrollable <table> in a <div> that forwards all its props. Every part accepts className, merged last.

Prop	Type	Default	Description
featured	number	-	The 0-based index of the plan column to highlight. The header cap and the column tint both derive from it. Omit for none.
align	"start" \| "center"	"start"	Places every plan header in its column: `start` over full-width CTAs, `center` for a versus matrix.

PricingComparisonHeader

The sticky plan-header row, a <thead>; it numbers its plans so featured can find them.

Prop	Type	Default	Description
label	React.ReactNode	-	A caption for the empty top-left corner, e.g. `Compare plans`.

PricingComparisonPlan

One plan's column header, a <th>. Its children are the CTA, stretched full-width and pinned to the cell's bottom.

Prop	Type	Default	Description
name*	React.ReactNode	-	The plan name, the column's label.
icon	React.ReactNode	-	A decorative mark above the name: a logo or a plan glyph.
price	React.ReactNode	-	The headline price in `tabular-nums`, e.g. `$29` or `Custom`.
period	React.ReactNode	-	The muted suffix, e.g. `/mo`.
badge	React.ReactNode	-	A chip beside the name, e.g. a `Most popular` Badge.

Data attribute	Description
data-featured	Present on the featured plan's header.

PricingComparisonSection

A group of rows, a <tbody>.

Prop	Type	Default	Description
title	React.ReactNode	-	A full-width band above the rows. Omit for an ungrouped block.

PricingComparisonRow

One feature, a <tr>. Order its cells to match the plan columns.

Prop	Type	Default	Description
label*	React.ReactNode	-	The feature name, the row's leading header cell.
hint	React.ReactNode	-	Appends an info glyph whose tooltip carries the detail.
hintLabel	string	"More information"	The info glyph's accessible label.

PricingComparisonCell

One plan's value for a feature, a <td>: its children as a value, or a glyph when empty.

Prop	Type	Default	Description
included	boolean	true	With no children, a success check, or a muted minus when `false`. Ignored when children are passed.

Reach for Pricing (the card table) for the marketing moment: a handful of plans, each selling itself with a short feature list and a CTA. Reach for Pricing Comparison when buyers are deciding between plans and need to compare line by line: it lays every feature out as a row so differences are obvious at a glance. Many sites use both, the cards up top and the full matrix below.