Case study
kinetic-ui
Overview
A React component library with a tactile, skeuomorphic look, 65 pieces you can drop in with the shadcn CLI. Dark and light themes, keyboard-friendly, with accessibility checks running in CI.
Problem
shadcn/ui gives you unstyled primitives and leaves the skinning to you. There was no ready-made skeuomorphic skin you could install as a registry. Teams that wanted that tactile, realistic look had to build it by hand, and hand-written component docs tend to drift from the real code.
Approach
I built a Vite + React 19 + Tailwind CSS v4 showcase with a full shadcn-style catalog, 64 components plus a material-skin bundle, published as a versioned registry on jsDelivr. Register it once, then add components with the shadcn CLI; their dependencies and the skin install on their own. A generated docs site keeps one page per component in sync with the source.
Architecture
Source-owned components live in src/components/ui with a registry.ts inventory and a generated registry.json pinned to a release tag (@v1.2.0) served from jsDelivr. src/library.ts is a showcase-independent entrypoint built via npm run build:library. The showcase shell, chart gallery, and reference catalog are lazy-loaded. Fontsource bundles DotGothic16, Geist, and Geist Mono locally so there is no Google Fonts request. Quality gates: ESLint with zero warnings, Prettier, Vitest unit tests, Playwright + axe-core accessibility runs, enforced build budgets, and a CI job that installs @kinetic/button into a throwaway Vite app from the pinned registry tag.
Challenges
Every component needs keyboard support and focus handling, dialogs trap focus, comboboxes take arrow keys, and the date picker is a keyboard-navigable grid. Nonessential animation is disabled when the user prefers reduced motion. The real risk is registry drift: a CI job reads the pinned registry URL from the generator source and installs from that exact tag, so the code and registry can't quietly diverge, it fails fast if a release tag moves before the release ships.
Results
A versioned, installable library: 65 registry items, shadcn CLI installs with the skin bundle included, per-component docs linked to the source, dark and light skeuomorphic themes, and automated accessibility and install checks in CI. Pinned releases give you an immutable registry per version.