UI Kit

Seventeen packages, fifteen of them published: a design system, a charting layer, a virtualised data grid, a declarative dashboard renderer, typed HTTP client and mock packages, router utilities, and the shared build, lint and format configuration every consumer inherits rather than re-derives.

The design system sits on Ark UI’s headless primitives, chosen over the alternative after a written comparison on component coverage, type safety and how much visual drift each would introduce. Headless was the point: the behaviour — focus management, keyboard handling, ARIA — comes from the primitive, and everything visible comes from a token contract the toolkit owns.

The data grid is where that pays off. Virtualised rows with a sticky header, faceted per-column filters, column resize, reorder and pinning, and master/detail expansion — each feature composing with the others rather than living in its own reduced variant of the table.

Charts wrap visx, themed from the same tokens as everything else, and add the parts a dashboard needs and a chart library usually leaves out: a time-range brush, zoom and pan, reference bands, candlesticks, and a legend. For series past a thousand points there are two downsampling strategies — largest triangle three buckets, and min/max per pixel — so the shape survives the pixel budget.

A dashboard is described rather than assembled. The renderer takes a declarative spec — a layout tree, a widget registry, data bindings — and validates it structurally and referentially without throwing, so a malformed dashboard reports what is wrong with it instead of blanking the page.

Dark mode is verified rather than asserted: a contrast checker in the preview measures the token pairs against AA and shows the ratio, which is how a too-subtle accent gets caught before a consumer ships it.

The toolkit ships a doctor command for the same reason. It catches the failures that are invisible until they reach production — a consumer’s Panda configuration missing recipes, so those components render unstyled; a colorPalette read with no role behind it, emitting a CSS variable nothing defines. An audit of the lint presets themselves found two rules that looked enforced and could not fail: one shipped at warning level under a linter that exits zero on warnings, and one filed under a category the preset never reached.

Bundle size gets the same treatment. Measuring every module in isolation turned up a barrel import that cost 82 kB minified on its own, before any chart was drawn. A consuming application had already fought its entry chunk from 1,004 kB down to 80 by hand-maintaining its own chunk map; splitting the package into core, primitives and chart tiers is what made that unnecessary.