A complete hand-drawn UI kit in plain HTML, CSS & vanilla JS. Marker-on-paper aesthetics, no dependencies, dark mode, and real native form controls.
The whole aesthetic comes from a single feTurbulence + feDisplacementMap pair. Apply it anywhere with filter: url(#hand-drawn).
Every input, select, checkbox and radio is a real <input>. Forms work, autofill works, screen readers work.
One CSS-variable swap flips to chalkboard mode. Mobile layouts collapse cleanly; touch targets stay 44px+.
Modals, toasts, dropdowns, combobox, gallery+lightbox, tabs, accordion, kanban, stepper, rating, skeletons, empty states.
No React, no build step, no npm. Two files: sketchy.css and sketchy.js. ~82 KB unminified, ~58 KB minified.
Theme via CSS custom properties. Crank up the wobble by changing one SVG attribute. Rebrand in five minutes.
Every control in the kit, demo'd live. Inputs, modals, gallery, combobox, tabs, table, and more.
Browse → /how-to-use.phpInstall, the SVG filter, dark mode, every component's API, accessibility notes, and tips.
Read → /example.phpA full sketchbook-app dashboard built from the kit. Stats, kanban, modals, tabs — all wired up.
Try it →// drop two files in, you're done
<!-- development -->
<link rel="stylesheet" href="sketchy.css">
<script src="sketchy.js"></script>
<!-- production (minified) -->
<link rel="stylesheet" href="sketchy.min.css">
<script src="sketchy.min.js"></script>
<!-- paste once at the top of body -->
<svg width="0" height="0">
<defs>
<filter id="hand-drawn" ...>...</filter>
</defs>
</svg>
<!-- then use anything -->
<button class="btn primary">Save</button>
<input class="ip" placeholder="Hello" />
<label class="check">
<input type="checkbox" />
<span class="box"></span>
Checkbox
</label>See the full guide on How to use.
// pure CSS + vanilla JS · no canvas · no dependencies · © 2026 R24k Web-Ateljé · License