Comparison Table

Compares your product with others in an "us versus them" table. The first column is highlighted, rows reveal with a stagger, and a thin bar under each numeric cell shows a byte count or a score at a glance. A semantic table with zero JavaScript of its own.

	Moonarc Pro	React Bits Pro	Aceternity
Astro without a React island	yes (better)	no	no
Measured JS cost per component	yes, in CI (better)	no	no
Tools that run on your repo	audit + measure (better)	no	no
WebGL spectacle	11 so far, each tested for leaks and lost contexts	far more (better)	some
Fixed catalogue, one payment	Founding 200 only	$129–349 once	$199 once, better if that is all you want (better)

Live, from the library itself, at full size: scroll, hover, navigate away and back. The demo is never gated.

Measured

JavaScript of its own

0 B

Uses Reveal and the shared runtime (1.9 kB raw, once per site). With those included: 3.0 kB raw.

CSS 12.0 kB raw including the base tokens. Measured from a production build, and again in CI for every change that can move it.

Browser support

Baseline · newly available

Chrome 85 · Firefox 128 · Safari 16.4; needs property. Elsewhere: bars fill without animating.

Install Pro

The demo above is never gated; the source is. With a key in components.json (see account), the registry serves it like any other item:

terminal

npx shadcn@latest add @moonarc-pro/compare-table

src/pages/index.astro

---
import CompareTable from '@/components/moonarc/pro/CompareTable.astro';
---
<CompareTable
  columns={['Ours', 'Product A', 'Product B']}
  max={10}
  rows={[
    { label: 'Setup steps', cells: [{ text: '2', value: 2, good: true }, { text: '9', value: 9 }, { text: '6', value: 6 }] },
  ]}
/>

Without a key the registry answers 401 with an upgrade message. Everything this section composes is free: reveal, progress.

Props

Prop	Type	Default	Description
`columns`	`string[]`	none	Column headers; the first is "us".
`rows`	`{ label, cells: { text, value?, good? }[] }[]`	none	Rows; a numeric value draws a bar; good bolds the cell and adds goodLabel for screen readers.
`max`	`number`	`100`	Maximum for the bars, shared by every row.
`tone`	`'surface' \| 'muted' \| 'ink' \| 'brand'`	`unset (paints nothing)`	The ground: the page surface, a muted band, an always-dark ink panel, or a deep brand panel. Each paints --background, --ma-tone-muted (over --muted, with a --border hairline), --ma-tone-ink or --ma-tone-brand (over --primary) with the matching text. With theme.css, a painted tone also re-declares --card, --border, --input and --ring inside the section, so cards and fields follow the ground. Decoration is strongest on brand.
`density`	`'compact' \| 'cozy' \| 'roomy'`	`'cozy'`	Cell padding ×0.8 / ×1 / ×1.25 through --ma-density.
`label`	`string`	`'Comparison'`	Accessible name of the table, which scrolls sideways when a narrow screen cuts it: the section takes a tab stop, so a keyboard can reach and scroll it. Make it unique per page.
`goodLabel`	`string`	`'better'`	Screen-reader text after a good cell's text, in parentheses, since bold alone says nothing to a screen reader.

Theming and overrides

The section reads the theme contract (shadcn's variable names with the base tokens as fallback), so a pasted theme or one --ma-brand recolours it. Its class names are the override surface and stay stable; a named slot replaces the matching prop with your own markup.

Classes

.ma-compare.ma-compare__bar.ma-compare__copy.ma-compare__eyebrow.ma-compare__head.ma-compare__headline

Slots

slot="eyebrow"slot="headline"slot="copy"

Reduced motion

Rows fade in without stagger; bars are full at once.

With `ClientRouter`

Inherits Reveal and Progress; nothing to wire.

Why it is built this way

Bars share one max, the max prop, across the table, so 2 next to 9 is a short bar next to a long one. The difference is visible before the numbers are read.
The highlighted column is a 6% tint, so the table still looks neutral. A comparison table has to look fair to be believed.
Let a competitor win the rows it wins. A table where every cell is green reads as an advert.
The bars are aria-hidden: the cell's text already says the number, and a screen reader should hear it once. The corner cell is a td, not an empty header, and the table scrolls inside itself from the keyboard as well (a tab stop) on a phone.

Replaces: Comparison sections (Tailwind Plus). See the migration table.

Progress

A bar that fills to its value when it scrolls into view, with the number counting up beside it, or a ring with the number in the middle.

newly · Chrome 91 · Firefox 128 · Safari 17scroll

Scroll Reveal

Scroll

Entrance on scroll that plays once and stays, staggers its children, scrubs with the scroll position when asked, honours reduced motion, and keeps working after every ClientRouter navigation.

every browserscroll

Feature	Free$0	Pro$129/yr	Team$349/yr
Primitives	Included	Included	Included
Sections	Not included	28	28
Audit tools	Not included	Included	Included
People	Anyone	1	Up to 10
Client work	Included	Included	Included

Pricing Table

Pro

A feature-by-plan comparison: the highlighted plan's column lit, rows revealed with a 40 ms stagger as the table scrolls into view, and a header row that sticks when you cap the table's height.