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

说明与用途

PlopUI 是一个手绘 React 组件库，保持可访问性并提供确定性样式，兼容服务器端渲染。

问题

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

结果

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

工作流

• 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

证据

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.

来源

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

来源

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.

来源