Hand-drawn React UI, imperfect on purpose: sticker buttons, washi-tape tags and a marker font, built on accessible native elements (WCAG AA). Installs the @plop-ui/react npm package plus editable examples and blocks.
Doodle faces generated from a name, so the same person always gets the same face. Real photos can drop in too.
A trail of hand-drawn chevrons from home to here. Intermediate pages tuck behind an ellipsis in narrow containers; reveal them with a click, Enter or Space.
A cast of characters, one per state: Pip cheers success, Bix winces at errors, Snooze dozes on stale data, Confetti celebrates, Specs previews and Hum thinks while loading. Stand one alone, or let it peek over any component.
The hero sticker. Peels on hover, squishes on press, springs back. Add a buddy for the one action that matters most on a screen, and a burst for the presses worth celebrating.
A strip torn off a pad. Use it for things people need to know before they act, not for decoration.
Three paper objects for three jobs: a ticket stub for queue items, a taped unit card for people, a sticky note for quick context.
The tick is drawn in one stroke and overshoots the box, like a pen would.
Round count stickers and little status dots.
An empty state with a buddy, a short message and one clear next step, for lists and boards with nothing in them yet.
A round sticker with just an icon. The label is required, so it can never ship without a name.
Spinners, progress, skeletons and the in-between states nobody designs until it's too late. Drawn by hand, honest about time, quiet for screen readers and still under reduced motion.
A sticker button that opens a short sheet of actions: hand-drawn icons, keycap hints, a dashed separator and one careful red item at the end. Use the round icon version at the end of a row.
Page numbers as small stickers. The current page is inked in; long runs leave a little ellipsis between the pages that matter. Uses the same paper edge, seeded tilt and press feedback as Button.
Sets the surface, theme and feedback settings for everything inside it, and renders the filters, ink-burst layer and toast zone.
Installs @plop-ui/react and @plop-ui/fonts, loads their styles once, and gives you <PlopProvider>.
Radios fill with an ink blob. A fieldset of real radio inputs.
A search box with a wobbly marker outline that boils while it has focus, grouped results on a taped sheet, highlighter matches and keycap shortcuts. The same field powers a ⌘K command palette.
Pick one or pick many from a taped paper sheet. The trigger has the fields' wobbly marker outline and boils while open, picks get a tick that draws itself in, and in a MultiSelect every pick sticks onto the trigger as washi tape. Add a search box for long lists, like a people picker.
A settings sheet: profile fields, notification switches, a paper picker, and a Save button that toasts with a buddy.
The paper everything sits on, and the lettering that labels it.
A sign-up card: name, email and password with friendly errors on submit, a terms checkbox, and a celebration when it works.
A marker stroke with a mustard sticker to grab. The thumb squishes into the paper when pressed and springs back on release; a native range input does the work underneath.
Where a sketch is right now. Done steps get a cobalt tick, the current step boils, the rest are pencilled in.
The knob is a little face. It sleeps when off and wakes up when you flip it on.
Index-card dividers. The active one comes forward and joins the page. Arrow keys move between them.
Status labels are strips of washi tape. Removable tags peel off when you dismiss them.
Focus swipes a highlighter across the label and makes the outline boil. Errors switch to tomato ink and say how to fix it.
Slaps onto the bottom of the screen like a stamp, then lifts off after a few seconds. The wash behind it takes its kind (red for an error, green for success), and it can celebrate or wince when it lands.
A speech bubble that pops out of whatever it explains. Opens on hover and keyboard focus.
Words lettered in Sketchpop and cut out like a sticker, plus little marker doodles to go with them. Design one in the playground's Lettering tool and copy the component.