Rudiment UI
Personal project · Component architectureA React component library I designed and built.
A token-driven React component library with accessible interaction patterns and live Storybook documentation. Explore individual components and variants, then try the project board, sprint dashboard, and storefront built from them.
- My role
- Designer and engineer
- Built with
- React, TypeScript, React Aria
- Scope
- Component library and Storybook implementation
- 3
- token tiers
- 3
- featured Storybook examples
Example pages built with the library
A sprint board, an analytics dashboard, and a storefront, built entirely from Rudiment components. These are live Storybook stories, so you can load one and use it.
Project board
A Kanban board of draggable issue cards across four sprint columns, with WIP-limit warnings. Cards can be dragged with a keyboard as well as a mouse.
Sprint dashboard
An analytics page with stat tiles, a burndown line chart, a work-by-status donut, and team workload meters.
Ecommerce landing page
A marketing storefront: sticky navigation, a full-bleed hero, and a shop-by-room product grid.
Scope and results
- Skills
-
- Accessible component APIs
- Front-end architecture
- UI/UX design
- Storybook documentation
- Theming
- Stack
-
- React
- React Aria
- Storybook
- Design tokens
- Tailwind CSS 4
- Quality
-
- Keyboard operability
- Focus management
- ARIA semantics
- Token contrast checks
- Implementation
-
- Three-tier token architecture
- 3 featured pages composed from the library
- Live component documentation in Storybook
I designed and built Rudiment UI as a personal reference library for React interfaces. Storybook brings the implementation together: component APIs, visual variants, interaction states, and examples that show how the pieces work in a complete interface.
Making components work together
A component needs to hold up on its own and alongside the rest of the library. A button can look right in isolation while its spacing, focus behavior, or styling becomes awkward inside a form or toolbar.
Rudiment UI combines component stories with composed interface examples. The board, dashboard, and storefront show how the same tokens, layout primitives, and controls work together across different kinds of pages. Storybook gives readers a place to inspect those details and try the interactions directly.
A three-tier token system
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, so a rebrand changes one file and a change to one component doesn't affect the rest of the library.
Global tokens · raw palette
Raw values with no meaning attached.
color.blue.500 = #3B82F6 Semantic tokens · assigned meaning
Names that describe intent, such as brand or danger. A rebrand only changes this layer.
color.brand.primary → color.blue.500 Component tokens · scoped values
Values for a single component, so it can be adjusted without affecting others.
button.background.default → color.brand.primary
Token files use the Design Tokens Community Group format, flow
through Style Dictionary v4, and land in Tailwind CSS 4 via
@theme inline, so changing one value updates every component that uses it.
Accessibility with React Aria
Interactive components need a lot of accessibility behavior. A modal
alone needs focus trapping, scroll locking,
escape-key handling, focus restoration, and
aria-modal
management. Instead of rebuilding that for each component, Rudiment
uses React Aria, maintained by Adobe's design system team, for 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.
Accessibility features
- Full keyboard operability via React Aria
- Focus traps & restoration in overlays
- ARIA semantics on every component
- vitest-axe checks in every test run
- Eight intrinsic layout primitives
- Contrast verified against token values
Explore the implementation
Storybook is the live reference for the library. Browse layout primitives, form controls, overlays, and visual variants, then open the example pages to see them composed into interfaces.
- Live components built on React Aria & Tailwind CSS 4
- Token-driven theming visible across every story
- a11y & interaction addons wired in out of the box
I also wrote the separate 13-chapter Rudiment Guide, a walkthrough of component-library architecture.