Open source · Design Systems

UI Density Linter

Check component spacing, density and content length against a chosen rhythm.

v0.1.0 · Node.js 22+ · MIT

Browse the public repository · View releases

For every component it checks four things against the density that component declares: that its content fits inside its box, that a control's height is inside its range, that text has not wrapped past its allowance, and that the gaps around it are a whole number of base units inside the permitted range. It reports what it found as JSON on stdout and a human summary on stderr.

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

# a deliberately compact density that passes its own rules
node bin/ui-density-linter.mjs \
  --capture examples/clean/capture.json \
  --rules examples/clean/density.rules.json \
  --now 2026-09-18
echo $?   # 0

# a long label that overflows its box, and three other density breaks
node bin/ui-density-linter.mjs \
  --capture examples/broken/capture.json \
  --rules examples/broken/density.rules.json \
  --now 2026-09-18
echo $?   # 1

Read the result

npm run example runs the first of those, and npm run example:broken the second. --now is passed so the example's verdict does not depend on the day it is run; see The clock.

Where this check stops

Every limit is enforced. Exceeding one is an incomplete result naming the limit — never a silent truncation, and never a pass.

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.