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.

Источник