Sketchy Kit

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.

$39

one-time, lifetime use

Buy now → See components Live example

One SVG filter, infinite wobble

The whole aesthetic comes from a single feTurbulence + feDisplacementMap pair. Apply it anywhere with filter: url(#hand-drawn).

Real native controls

Every input, select, checkbox and radio is a real <input>. Forms work, autofill works, screen readers work.

Dark mode + responsive

One CSS-variable swap flips to chalkboard mode. Mobile layouts collapse cleanly; touch targets stay 44px+.

20+ components

Modals, toasts, dropdowns, combobox, gallery+lightbox, tabs, accordion, kanban, stepper, rating, skeletons, empty states.

Zero dependencies

No React, no build step, no npm. Three pieces: sketchy.css, sketchy.js, and a small SVG filter snippet you paste once. ~82 KB unminified, ~58 KB minified.

Easy to customize

Theme via CSS custom properties. Crank up the wobble by changing one SVG attribute. Rebrand in five minutes.

Three pages to explore

/components.php

Quick start

// drop three pieces 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.

Get Sketchy Kit

$39

One purchase, lifetime use. CSS, JS, full source, all 30+ components, dark mode, example dashboard. License covers unlimited personal and commercial projects, including client work.

Buy now →