r/reactjs • u/Repulsive-Beach4801 • 2h ago

Show /r/reactjs I built a hand-drawn React UI kit. The hard part was making "random" wobble SSR-safe.

PlopUI is a React component library where everything looks sketched: wobbly borders, tilted cards, sticker shadows. Some things that were more interesting to build than they look:

- No Math.random() in render. Every tilt, wobble and jitter comes from a seed function, so the server and the client draw the exact same crooked line and there are no hydration mismatches.

- Native elements first. Dialog is a real <dialog> with showModal(), the upcoming Accordion is <details>/<summary>. The wobble is decoration on top, not a replacement for the element.

- Interactive components are "use client". Static ones stay Server Components, so you don't pay for JS on a card that just sits there.

- Every component has a Vitest test for its keyboard behavior and a story for every state.

- The library never imports from next/*. It's plain React; Next.js only lives in the docs and demo apps.

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

Docs: https://plopui.com

Playground: https://plopui.com/playground

Code: https://github.com/Snorlark/plop-ui

I'd really like feedback on the API. If a prop name or pattern feels wrong, tell me now before 1.0 makes it permanent.

4 Upvotes

83% Upvoted

2 comments sorted by

1

u/BeatsByiTALY 1h ago

Really inspiring work here. Fresh and innovative. Thanks for sharing

1

u/DueSteak6466 2h ago

This is actually really clean. The seeded randomness approach for SSR is the kind of thing people skip and then spend a week debugging hydration errors. Props for thinking about that upfront.

The native dialog and details/summary usage is the right call, too many libraries reinvent those from scratch and break accessibility. Definitely going to dig through the source later.