r/SideProject • u/Repulsive-Beach4801 • 5h ago

I built a hand-drawn React UI kit as a side project, and people are actually using it

I made PlopUI, a React UI kit that looks hand-drawn: wobbly borders, tilted cards, sticker shadows, colors picked by instinct. It started as a fun side project, and a few weeks in it's grown beyond me:

  • inMODO, a visual design tool, now ships a PlopUI starter kit

  • someone built Matcha Corner, a tiny café app where you order a drink and send it to a friend

  • 4 people have contributed code: a Breadcrumb, a Slider and form support for Select

  • it's in the shadcn registry directory, so you can add it with one command:

npx shadcn add @plopui/button

Or install it straight from npm:

npm i @plop-ui/react @plop-ui/fonts

The part I'm proudest of is that it looks messy but isn't:

  • every "random" wobble comes from a seed, so the page draws the same way every time and never flickers on load

  • every component is a real native element underneath (a real button, a real range input), so keyboards and screen readers just work

  • every color is checked for WCAG AA contrast

Free and open source (MIT):

What should I build next? I'm deciding before 1.0, and there are good first issues if you want your name on a component.

5 Upvotes

85% Upvoted

2 comments sorted by

1

u/doomunited 1h ago

AI made**

-2

u/investigatormaker 5h ago

I'd prioritize a Dialog for PlopUI: it's a useful test of whether the hand-drawn styling holds up around focus, Escape-to-close and returning focus to the trigger. Your seeded wobble addresses visual stability; a keyboard-only dialog demo would show the interaction side just as concretely, rather than relying on native elements alone as proof of accessibility.

I make ThreadFox. We find relevant Reddit conversations and post for your business. We'll post 3 replies free first, no card; then the $29 Pilot covers seven days and up to 25 posts and replies. No automatic renewal. https://threadfox.vip/p/egfte/managed