What is PlopUI?
PlopUI (also written Plop UI or plop-ui) is an open source React component library that looks hand-drawn on purpose: wobbly stickers, washi-tape tags and a hand-lettered marker font. It breaks the visual rulebook, never the accessibility one.
In one sentence
PlopUI is a free, MIT-licensed set of hand-drawn React UI components, built on native HTML elements, tested with a keyboard and accessible to WCAG AA, made by Lark Sigmuond Babao.
Who it's for
Products that should feel made by a person, not generated by a template.
Not the right pick for
What makes it different
- Tab
Native elements first
A button is a real <button>, a checkbox a real checkbox. The drawing sits on top, never instead.
- AA
Accessible to WCAG AA
Every interactive piece works with a keyboard and has a test for it. Status never relies on color alone.
- Seed
Seeded, not random
Every tilt and wobble comes from a seed, so the server and the browser draw the same crooked line.
- SSR
Built for the App Router
Static pieces stay Server Components. The package never imports next/*, so any React 19 app works.
- --plop
Tokens, not hex
Colors, type and motion are CSS variables from @plop-ui/tokens, with measured contrast.
- Calm
Kind to motion
With reduced motion on, every animation stops. State changes still show, just instantly.
What's in the box
- Components and hooks
@plop-ui/react
Every component, the buddy cast, seeded randomness and onColor(). Read more - CSS variables + typed JS
@plop-ui/tokens
Colors with contrast roles, type, motion and five paper surfaces. Read more - Sketchpop, SIL OFL
@plop-ui/fonts
The marker lettering family, light to black, upright and italic. Read more
How it compares
Most hand-drawn React libraries draw their shapes at runtime with Rough.js or wired-elements, for example hand-drawn-ui, Skeci UI, SketchUI and bydefaulthuman. That gives a lovely pencil-sketch look. PlopUI takes another route:
| Rough.js-style kits | PlopUI | |
|---|---|---|
| Shapes | Generated at runtime | Its own drawn SVG marks |
| Randomness | Varies by library | Seeded, same on server and client |
| Look | Pencil sketch | Stickers, tape and marker on paper |
| Foundation | Varies by library | Native elements, keyboard tests, reduced motion |
Who makes it
PlopUI is designed and built by Lark Sigmuond Babao, in the open. Issues, ideas and pull requests are welcome, and a few are labeled “good first issue”.
Questions
Is PlopUI free?
Yes. The code is MIT-licensed and the Sketchpop font is under the SIL Open Font License, so both are free for personal and commercial projects.
Do I need Next.js?
No. PlopUI works in any React 19 app. Next.js gets extra care: interactive components ship with "use client" and static ones stay Server Components.
Is it ready for production?
The components are tested, but PlopUI is still before 1.0, so some names may change. Pin your version and read the changelog when you upgrade.
How is it different from other hand-drawn kits?
Most draw their shapes at runtime with Rough.js or wired-elements. PlopUI ships its own drawn SVG marks, seeds every wobble so server and client match, and starts each component from the native element with keyboard tests and reduced-motion support.
Is PlopUI related to Plop, the code generator?
No. Plop (plopjs.com) is a micro-generator for scaffolding files. PlopUI is a UI component library; the names are just similar.
Looking for Plop, the code generator? It lives at plopjs.com.