Sergey Horse
RUEN
Work

Live · July 2026

Forge

A headless component library for data-dense dashboards

  • design-system
  • react
  • typescript
30
Components
628
Tests
94%
Coverage

The problem

shadcn gives you buttons and dialogs. It does not give you the hard, data-dense pieces a dashboard actually needs: a grid that stays smooth at tens of thousands of rows, a filter builder that composes nested AND/OR logic, an async combobox that is genuinely accessible. Forge is that missing layer, built headless-first so the behavior is reusable and the styling stays yours.

The DataGrid: a sticky header holds on vertical scroll, then frozen ID and Name columns stay pinned as the rest slides under.

The DataGrid

The grid is the centerpiece and the hardest component. It virtualizes both axes, keeps a bounded number of cells in the DOM no matter the dataset size, and pins frozen columns as a separate opaque layer, because sticky positioning breaks inside a virtualization transform. Three layout bugs landed back to back: frozen cells overlapping, overscan rows painting past the bottom edge, and scroll content bleeding through a transparent overlay. They all taught the same thing. Pure layout invariants are invisible to jsdom and to code review, and each one needed a real browser measuring computed paint.

Accessibility was its own project: the full ARIA grid pattern, roving focus that survives a cell scrolling out of the virtual window, and a visible focus ring mirrored onto clipped frozen cells.

Storybook accessibility panel showing zero violations
Storybook accessibility panel: zero violations, nineteen passes on the story suite.

What shipped

Thirty components, from the DataGrid and FilterBuilder down to inputs, overlays, and the dashboard cards. 628 tests in total, 498 unit tests plus 130 that drive the stories in a real browser, with zero accessibility violations on the story suite and coverage around 94 percent. The DataGrid holds its frame budget while scrolling ten thousand rows and keeps a constant cell count at a hundred thousand.

It is published rather than merely finished. The package is on npm as @sergeyhorse/forge, ESM only, with a documentation site that presents every component with live examples and a Storybook alongside it. What ships in the tarball is the built dist, a README, and a license: no sources, no tests, no stories riding along.

The FilterBuilder composing a nested query: a root AND with a child group toggled to OR.
Forge dashboard KPI cards
Dashboard primitives: KPI cards with up, down, and neutral deltas.

What I learned

Contrast can pass an automated audit and still be wrong. Because the palette is authored in oklch, the audit flags contrast as incomplete instead of failing, so a genuine failure on a dark delta sailed past every automated run. I only caught it by computing the ratio by hand, and now I verify the ratios that matter myself rather than trusting a green check.