I built a hand-drawn React UI kit that's crooked on purpose and accessible anyway

Description and use

PlopUI is a hand‑drawn React component library that preserves accessibility and deterministic styling for server‑side rendering.

Problem

Most UI kits aim for neutral, polished look, but lack personality and accessibility consistency.

Outcome

PlopUI delivers a playful, hand‑drawn UI kit that maintains accessibility, deterministic styling, and efficient server rendering, suitable for creative projects.

Workflow

• Design components with native HTML elements overlaid by hand‑drawn SVGs
• Use deterministic seed functions to generate consistent tilt and wobble
• Ensure all interactive elements expose proper ARIA roles and keyboard support
• Implement prefers‑reduced‑motion handling and pause logic for animations
• Tree‑shakeable package structure for minimal bundle size
• Deploy via npm packages @plop-ui/react, @plop-ui/tokens, @plop-ui/fonts

Evidence

A PlopUI button is a real <button>. A checkbox is a real checkbox. The hand‑drawn outlines, shadows and doodles are decoration layered over native elements, so the browser and screen readers still know exactly what everything is.

Source

Every interactive component has a keyboard test, and the docs site runs end‑to‑end tests in Chromium, Firefox and WebKit.

Source

Same seed in, same crooked line out, on the server and in the browser. The rounding matters too: two decimals means the number is written identically in the server HTML and in React's props.

Source