ComparisonTable
Options side by side across shared dimensions, with clear headers and a readable layout on phones.
| Feature | Free$0 | Pro$20 per seat · Recommended | EnterpriseCustom pricing |
|---|---|---|---|
| Usage | |||
| Projects | 3 | Unlimited | Unlimited |
| Seats | 1 | Up to 50 | Unlimited |
| Security | |||
| SSOSAML and OIDC | Not included | Not included | Included |
| Audit log | Not included | Included | Included |
Installation
Run it from the root of a project already set up with zunoui init.
npx zunoui@latest add comparison-tableDependencies
What add comparison-table installs alongside the component. The CLI skips any you already have in a compatible version.
ZUNO registry
@zuno/utils@zuno/table
Examples
2 examples · 1 component| Feature | Free$0 | Pro$20 per seat · Recommended | EnterpriseCustom pricing |
|---|---|---|---|
| Usage | |||
| Projects | 3 | Unlimited | Unlimited |
| Seats | 1 | Up to 50 | Unlimited |
| Security | |||
| SSOSAML and OIDC | Not included | Not included | Included |
| Audit log | Not included | Included | Included |
Plans in groups
Grouped dimensions, a recommended plan and boolean values. Narrow the window to see the pinned first column.
| Capability | Standard | Archive |
|---|---|---|
| Retrieval | Instant | Within 12 hours |
| Price per GB | $0.023 | $0.004 |
| Versioning | Included | Not included |
Two options
A flat list of rows comparing two products.
API reference
Configured through props: pass columns and rows (or groups of rows) and it renders the Table with the right header for every cell.
| Prop | Type | Default |
|---|---|---|
captionNames the comparison; it labels the scroll region too. | ReactNode | — |
columnsThe options being compared, as column headers. | { key; label; description? }[] | — |
rowsThe dimensions, as row headers. values maps each column key to text, a node or a boolean. | { label; description?; values }[] | [] |
groupsRows split into labelled sections ("Security", "Support"). Replaces rows. | { label; rows }[] | — |
highlightColumn key to shade, such as the recommended plan. Say why in its label or description too. | string | — |
dimensionLabelHeader of the first column. | ReactNode | "Feature" |
includedLabel / excludedLabelWhat screen readers hear for true and false values. | string | "Included" / "Not included" |
densityRow height, as in Table. | "comfortable" | "compact" | "comfortable" |
Accessibility
Every cell has two headers: options are column headers (scope="col") and dimensions are row headers (scope="row"), so a screen reader announces "Pro, Custom domains, Included".
Groups are their own tbody with a row-group header, which is announced when entering the section.
true and false render a check or a dash with hidden text ("Included", "Not included"), never an icon alone.
On narrow screens the dimension column stays pinned and the options scroll sideways. The scroll area is a focusable region named by the caption, so keyboards can scroll it.
The highlighted column is only shaded; state the reason in text, for example "Recommended" in the column description.