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!
Hand-drawn UI for apps that can’t wait.Lay it on the cutting mat
Sticker buttons, washi-tape tags and status timelines for dispatch, field service and ticketing. Accessible, server-rendered, and they squish.
Get started
npm i @plop-ui/reactFrom Lark <3
Hey builder!
Your users are having a rough day.
You build software for people on the line: a flooded street, a broken printer, a rider who’s late. They tap fast and read faster.
So every button should answer when it’s pressed. Every word should read on every color. And all of it should load quickly on a cheap phone.
That’s what PlopUI is for. Hand-drawn on the outside, accessible and dependable on the inside.
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 pack
Every piece is a little paper object.
Polaroids, tickets, notebook pages. Rugged on the outside, readable inside.
Piece no. 02
Tag
Status, as strips of washi tape. Removable ones peel off and fly away.
CriticalEn routeResolved
Admit one
Status timeline
Reported, dispatched, en route, resolved. The current step boils so eyes find it.
- Reported, done
- Dispatched, done
- En route, current step
- Resolved, 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 pack
Thirty pieces, one ink.
Each one a thin hand-drawn layer over an accessible primitive. Try any of them in the playground.
ButtonSix colors, three sizes, loading, and a buddy for the one action that matters.
TagStatus 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 timelineReported, dispatched, en route, resolved. 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 unit card and a sticky note.
TabsIndex-card dividers. Arrow keys move between them.
ProgressFilled with crayon hatching; the leading edge is one heavier stroke.
How it works
How a piece is made
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
Surfaces
Five papers, one ink.
Pick the paper your app sits on. Stickers stay the same; text colors adjust so everything stays readable, in light and dark.
import { PlopProvider, Button } from "@plop-ui/react";
export default function Page() {
return (
<PlopProvider surface="poster">
<Button variant="tomato" buddy>
Send report
</Button>
</PlopProvider>
);
}