spcaeo/uiComponents built to a measured bar.

A small collection of interface components where every colour is measured from the stylesheet by a script, every accessibility claim has a test, and CI fails if the docs and the code disagree. No build step, no design system to buy into.

Browse Components

The House Rules

View on GitHub

Contrast is measured, not eyeballed

A script parses the stylesheet, computes every text and boundary pair in both themes, and writes the table into the docs. CI re-runs it on every push. A colour cannot be nudged without the numbers moving with it.

How it is enforced

State survives greyscale

Shape and fill identity carry the state, never hue on its own. Print the page in black and white, or look at it with a colour vision deficiency, and it still reads. That is a requirement here, not a nice-to-have.

The greyscale rule

The keyboard is not optional

Roving tabindex, arrow keys, Home and End, correct roles and id pairing, a visible focus ring, and focus never parked somewhere you cannot see. Every component ships the whole WAI-ARIA pattern it claims.

The full contract

No build step

Plain CSS and, at most, one file per framework build. No Tailwind, no icon library, no bundler config. A framework build may take one dependency, and the README has to declare it.

What that costs you

Demos run from file://

Open the demo page straight off disk and it works. A demo that needs a web server to start gets filed as a bug, because a component you cannot try in ten seconds is a component nobody tries.

Why it matters

Every claim has a test

Reduced motion, forced colours, print, keyboard traversal, overflow behaviour. If a page says the component does something, a browser test asserts it, and the test runs in CI.

The test bar

What is here today

One component, finished. The collection is deliberately small — a component gets added when it can pass every rule on the House Rules page, not when it looks ready.

Folder Tabs

A tab control where the active tab is the panel — not a highlighted button. Rebuilt from the Visual Basic 4 SSTab control: three fills in a fixed relationship, real trapezoid tabs, a React build and a vanilla build over one stylesheet. Guide · CSS API · React API · Vanilla API

Start at the component index, or read the house rules if you want to know what the bar actually is before you trust anything on this site.