Matrix

Markdown

A heatmap table of counts with a single-hue fill, linked headers and linked cells.

Use it for
Counts across two dimensions as a heatmap table with links.
Not for
Continuous values over time. Try Chart.

Matrix preview

Loading example…

Installation

npm install @stackunseen/ui
import { Matrix } from '@stackunseen/ui';
Styles: @stackunseen/ui/styles.css

Usage and props

Every cell shows its number. The fill only backs it up, and the text switches color where the theme needs it to for contrast. Pass the counts and links from your app.

Supported inputs

This is the public signature used by this example. Open Code to see how the values and callbacks fit together.

label · rows: { id, label, href?, swatch? }[] · columns · value?(row, column) | values · href?(row, column) | hrefs · cellLabel?(row, column, value) | cellLabels · max? · format? · caption? · scrollLabel? · columnHeader?: horizontal | angled · zero? · totals?: rows | columns | both · totalsLabel?
How state and callbacks work
All props

Loading…

For your coding agent

Give the agent this page instead of a screenshot. The prompt wraps the page with the install and import lines and the rule that your server, not a click, completes an action.

Contract
label · rows: { id, label, href?, swatch? }[] · columns · value?(row, column) | values · href?(row, column) | hrefs · cellLabel?(row, column, value) | cellLabels · max? · format? · caption? · scrollLabel? · columnHeader?: horizontal | angled · zero? · totals?: rows | columns | both · totalsLabel?
Keeps honest
Every cell shows its number. The fill only backs it up, and the text switches color where the theme needs it to for contrast. Pass the counts and links from your app.
MCP
read_component "Matrix" on the docs endpoint
Open the Markdown file

Keyboard and customization

Keyboard

A real table with scoped headers inside a focusable, labeled scroll region; header and cell links are ordinary links.

Customization

Change shared colors, spacing, corners and icons with the theme. Use the component's supported props to adapt its content and layout. Customization guide and Theme Studio