ComparisonTable

A feature matrix whose rows and columns stay connected to their meaning.

Live — this one is real

Release formats
Feature	Source	Package
Typed declarations	Not included	Included
Inspectable source	Included	Included
Setup	Copy files	Install once

Usage

import { ComparisonTable } from "mizu-ui";

export function Example() {
  return (
    <ComparisonTable
      label="Release formats"
      columns={["Source", "Package"]}
      rows={[
        { label: "Typed declarations", values: [false, true] },
        { label: "Inspectable source", values: [true, true] },
        { label: "Setup", values: ["Copy files", "Install once"] },
      ]}
    />
  );
}

Source & setup

Import mizu-ui/styles.css once. Fonts are optional via mizu-ui/fonts.css. Override --mizu-* tokens or use className for local styling. Uses native React and CSS; install the package peers for root imports.

Inspect data/Records.tsx

Source is included in the npm package under src/data/Records.tsx.

Open full source ↗

Props

Prop	Type	Default	Description
columns	string[]	—	Column headings.
rows	{label: string; values: (string \| boolean)[]}[]	—	Feature rows aligned to the columns.
label	string	—	Table caption.

Accessibility

Row/column headers and caption are native. Boolean values use Included/Not included text; missing cells display a dash.

Motion

Static, scrollable table.

Works alongside

DataTable DescriptionList Stat BarChart