The Problem With Modern UI
We've all been there. You're building a side project at 2 AM, everything's working fine, but then you step back and look at your creation. It's functional. It's clean. It's also... painfully generic.
Another white card. Another blue button with perfect 4px border radius. Another system font.
Don't get me wrong, I love Tailwind. I use it daily. But sometimes you want your project to feel alive. Like a human actually touched it.
My "Aha" Moment
4 months ago, I was drawing diagrams in my exam book. My pen lines were crooked. The borders wobbled. Little doodles appeared in the margins when I got bored.
And I thought: why don't web interfaces look like this?
Not the crooked part, nobody wants broken layouts. But the warmth. The imperfection. The sense that someone cared enough to draw this by hand rather than drag it from a Figma template.
So I started building Sketchbook UI.
What Makes It Different
Most "alternative" UI libraries go for glassmorphism or neumorphism or whatever the latest Dribbble trend is. They still feel digital.
Sketchbook UI uses SVG paths that look like Bézier curves drawn by someone who's had too much coffee. Every component has:
- Wobbly borders - Not broken, just... organic
- Paper texture overlays - Subtle noise patterns you notice when you look closely
- Hand-drawn focus rings - Dashed lines that look like they were sketched with a pencil
- The Caveat font - If you haven't seen it, imagine a designer's handwriting at 3 AM
The Button component alone has 335 lines of code. Most of that is SVG path data. I spent an embarrassing amount of time tweaking control points to make the corners look "accidentally perfect."
"But Is It Production-Ready?"
Fair question. I asked myself this a lot while building it.
Here's the thing, it's not trying to be Ant Design. It won't power your enterprise dashboard (though honestly, it could). It's built for:
- Side projects you actually want to show people
- Landing pages that need to stand out in a sea of sameness
- Creative tools where the interface should feel approachable
- Portfolios of designers who want to practice what they preach
It's fully typed. Tree-shakeable. Under 70KB gzipped. It has Storybook docs, keyboard navigation, and respects prefers-reduced-motion.
But more importantly? It has personality.
The Technical Stuff (For The Nerds)
Under the hood, it's SVG-heavy. Every component measures itself with ResizeObserver and generates paths dynamically. The noise textures use SVG filters with feTurbulence, that fractal noise thing that gives you grain without bitmap images.
The color system is simple: paper background (#faf7f0), pencil strokes (#2a2a2a), and overlays for depth. But every component accepts a colors prop if you want to go wild with purple paper and green ink.
Oh, and the components has a hidden feature: it measures your text content and expands beyond its minimum width if needed. So "Submit" looks compact, but "Create New Repository" gets the space it deserves without breaking the sketch aesthetic.
Real Talk: Who Should Use This?
If you're building the next Stripe dashboard, maybe stick to their design system.
But if you're making:
- A personal blog that doesn't look like every other Ghost template
- A creative tool for writers or designers
- A landing page for your indie hacker project
- Literally anything where you want someone to say "oh, this is cute"
Then yeah. This is for you.
Check this video to see how each components look like :- Youtube Link
Try It. Or Don't. But Maybe Do?
I'm not going to hard sell you. The code is open source. The Storybook docs are live. You can play with every component in your browser right now without installing anything.
If you like it, ⭐ the repo. If you love it, use it in your next project. If you hate it... well, you probably stopped reading four paragraphs ago.
Live demo: sarthakrawat-1.github.io/sketchbook-ui
GitHub: github.com/SarthakRawat-1/sketchbook-ui
Thanks for Reading
Top comments (0)