Readable on every color
Each fill comes with the text color that passes WCAG AA on it, and onColor() picks one for colors you bring.
Press it!
PlopUI: Hand-drawn UI, imperfect on purpose.Lay it on the cutting mat
Wobbly lines, colors by instinct. It breaks the design rulebook, never the accessibility one.
Get started
npm i @plop-ui/reactFrom Lark <3
Hey builder!
Who said UI has to be perfect?
Most interfaces look the same now: the same grid, the same radius, the same safe palette. Clean, correct and forgettable.
PlopUI goes the other way. Lines wobble, stickers sit a little crooked, and the colors come from instinct, not strategy. Every imperfection is on purpose, an experiment rather than a rule.
Break the visual rulebook all you like. The rules that keep the door open, like contrast, keyboard and screen readers, stay put. They’re what lets everyone join the fun.
Creativity is the brain having fun. This kit is mine. Go make it yours.
Why PlopUIFun to look at.
Fun to look at.
Serious underneath.
A sticker on the outside, a careful component on the inside. Here's what you get with every piece.
Real elements underneath
Buttons are buttons, switches are switches. Keyboard, focus and screen readers work before the drawing does.
Server first
Static pieces are Server Components, and every wobble comes from a seed, so the server and the browser draw the same thing.
Every press answers
Press a sticker and it squishes, springs back, and buzzes on a phone. Cancel shakes its head instead of throwing confetti.
Papers, not themes
Poster, cutting mat, notebook, kraft and riso, light and dark. Colors, type and motion all come from tokens.
Kind on rough days
Turn on reduced motion and every animation in the kit stops. State changes still show, just instantly.
What’s in the packMade of paper.
Made of paper.
Built like software.
Polaroids, tickets and notebook pages, each one a real component.
Piece no. 02
Tag
Labels, as strips of washi tape. Removable ones peel off and fly away.
Wild ideaIn progressShipped
Admit one
Status timeline
Sketched, inked, colored, shipped. The current step boils so eyes find it.
- Sketched, done
- Inked, done
- Colored, current step
- Shipped, not started
Switch & checkbox
The switch knob sleeps when off and wakes up when on. Ticks are drawn in one stroke.
Contrast receipt
EVERY FILL / ITS TEXT
- Ink6.6:1
- Tomato4.6:1
- Periwinkle5.8:1
- Mint7.1:1
- Mustard7.1:1
- Paper6.9:1
Total failures0
Thank you for reading every word.
The whole packThirty pieces.
Thirty pieces.
Zero rulers.
Drawn freehand over accessible elements. Try any of them in the playground.
ButtonSix colors, three sizes, loading, and a buddy for the one action that matters.
TagLabels as strips of washi tape. Removable ones peel off and fly away.
SwitchThe knob is a face that sleeps when off and wakes up when you flip it on.
Status timelineSketched, inked, colored, shipped. The current step boils.
CalloutA strip torn off a pad, for what people must know before they act.
AvatarDoodle faces drawn from a name, so the same person always gets the same face.
CardsA ticket stub, a taped card and a sticky note.
TabsIndex-card dividers. Arrow keys move between them.
ProgressFilled with crayon hatching; the leading edge is one heavier stroke.
SpinnerA marker loop that never closes neatly, hopping dots, a coin-flip sticker. Waits with manners.
SkeletonHand-cut paper scraps that hold the place of what's loading.
How it worksDrawn by hand.
Drawn by hand.
Shipped as code.
Drawn by hand
Every piece starts as one cobalt marker line, with a little wobble left in on purpose.
Cut like a sticker
A paper border and a soft offset shadow, like a die-cut sheet you could peel.
Real HTML underneath
Peel one back and there's a native element: keyboard, focus and screen readers already work.
Press it
It squishes into the paper, springs back and buzzes on a phone. Go on, it's a real Button.
Ship it
Install it, put a PlopProvider at the root, and your pages render on the server with Next.js.
npm i @plop-ui/react
SurfacesFive papers.
Five papers.
Same wobble.
Pick the paper your app sits on. Text colors adjust so it all stays readable, light or dark.
import { PlopProvider, Button } from "@plop-ui/react";
export default function Page() {
return (
<PlopProvider surface="poster">
<Button variant="tomato" buddy>
Post sketch
</Button>
</PlopProvider>
);
}