A component library,
built to be understood.

Component libraries rarely fail loudly. They accumulate a thousand small compromises until the thing that once felt like a system feels like a patchwork. A missing semantic token layer turns a rebrand into hundreds of manual renames. An undecided styling strategy turns a refactor into a full rewrite. Accessibility bolted on after launch always costs more than accessibility designed in from day one.

Most of these mistakes aren't expensive because they were hard to avoid. They're expensive because they were made implicitly: in a stand-up, in a PR comment, in a hurried corner of someone's sprint. Rudiment UI starts from the opposite assumption: the structural decisions come first, with no code, and every choice gets written down alongside its consequences.

That's what the guide is. Chapter 1 contains no code at all. It's the conversation a team should have had before picking a CSS strategy.

Most token systems collapse because they try to do two jobs in one layer: hold raw values and express design intent. Rudiment separates those jobs across three tiers, each referencing the one beneath it. A brand change touches one file. A component tweak doesn't cascade into the rest of the library.

A single interactive component can carry an enormous accessibility surface. A modal alone needs focus trapping, scroll locking, escape-key handling, focus restoration, and aria-modal management. Rudiment doesn't rebuild that for every component. It leans on React Aria, maintained by Adobe's design system team, to carry the behavior layer.

React Aria owns keyboard navigation, focus management, ARIA semantics, pointer normalization, and i18n. Tailwind CSS 4 handles the visuals. The two layers stay cleanly separated, which is what lets the library re-skin without touching any behavior.

Tests then lock in that separation. Layout primitives are verified against the tokens and classes they emit. UI components are verified against their accessibility contract: keyboard activation, disabled and error states, focus behavior, loading-state ARIA, and zero axe-core violations. Tests query by role and text, never by class name, so refactors don't silently break coverage.

The guide is sequenced deliberately. You can't make sensible component decisions until the token layer is settled. You can't write useful tests until the component API is stable. You can't publish confidently until the build workflow guarantees every tier stays in sync. Each chapter earns the next one.

Rudiment ships as two deployed sites, and you can open both right now. The guide walks through the architectural decisions and trade-offs, chapter by chapter. The Storybook is the working library those decisions produced: every primitive, every component, every variant, in your browser.