Open source · Design Systems

Component State Matrix

Track required component states across design, stories and implementation.

v0.1.0 · Node.js 22+ · MIT

Browse the public repository · View releases

The contract says which states each component must have a story for — default, loading, error, empty, disabled, focus — and which variants it must show.

This walkthrough uses the tool's public README and checked-in example files. Run the command from a repository checkout with Node.js 22+; inspect the source before using it on your own files.

Run the checked-in example

node bin/component-state-matrix.mjs --root examples/covered --now 2026-09-15T09:00:00Z
# exit 0 -- every required state has a running story

node bin/component-state-matrix.mjs --root examples/gaps --now 2026-09-15T09:00:00Z
# exit 1 -- five gaps, each naming the component, the state and the stories that do exist

Read the result

An incomplete run is never a pass, and an unread document is never reported as an absent one — and neither is an unread record of one.

Where this check stops

Every limit is enforced and tested. An unknown limit or policy key throws rather than being ignored, and a flag that carries a value may be given once: a repeated flag is a configuration error, not a silent last-wins.

Before adapting the command to your own workflow, review the accepted inputs, exit codes and safety boundaries in the README.

Compiled with AI assistance from checked-in public documentation and example scripts. Run the example and review the repository's current documentation before relying on its result.