Components
Every control in the kit, one card per group. Toggle dark mode in the nav. All form controls are real native elements with sketchy skins; modals, toasts, dropdowns, combobox and the gallery are JS-driven.
hr
Text inputs
// <input> · <textarea> · search
Tip: keep it under 200 chars.
Please enter a valid email address.
Select, date, number, file, range
// native controls dressed up
Checkbox, radio, toggle
// real inputs, sketchy boxes
Buttons, chips, badges
// each button has its own irregular radius
Alerts & callouts
// status, info, warning, error, success
Avatars, rating, stepper
// people + interactive bits
Tabs
// data-tabs container; data-tab + data-panel pairs
Accordion
// uses native <details>, no JS
What is this kit?
sketchy.css and sketchy.js, you're done.Does it work in dark mode?
data-theme="dark" on the <html> element, or click the moon in the nav.Is it accessible?
Dropdown menu
// data-dropdown-trigger toggles open/close
Combobox
// data-combo + data-options JSON or comma-list
Image gallery + lightbox
// click any thumb · ← → arrows · Esc to close
Table
// dashed cell separators, sketchy header
| Sketch | Tags | Saved | |
|---|---|---|---|
| Onboarding flow | ux mobile | 2 days | |
| Color study | type palette | 5 days | |
| Logo wobble | brand | 1 wk | |
| Marker UI kit | ui illustration | just now |
Modal · Toast · Tooltip
// data-modal-open · Sketchy.toast() · .tt wrapper
Skeletons, empty state, swatches
// loading, no-data, color picker
Nothing here yet
Start by drawing your first sketch.
Date picker
// custom calendar — click title to switch month/year views
Click the title to jump to month, again for year. Today + Clear shortcuts in the footer.
Pagination · Breadcrumbs
// for paged lists and trail navigation
Images inside hand-drawn frames
// .frame — sharp image, sketchy border
<div class="frame">
<img src="photo.jpg" alt="..." />
</div>The image clips to clean sharp corners via overflow:hidden. Only the ::after border gets the wobble filter — content stays pixel-perfect.