UI that looks like you drew it
React components with Excalidraw-like chrome. Text stays HTML. Shuffle redraws the wobble.
Scratch sheet
live
Looks right
Shuffle the page to redraw every line without touching the copy.
Every stroke is SVG. The type is still HTML.
Install
npm install doodleui-react
Twelve pieces, one pencil
Button
Click target with sketchy chrome
Input
Text field with a wobbling border
Textarea
Multi-line sketch box
Checkbox
Square plus a drawn check
Radio
Circle with a hand-filled dot
Card
Container with an optional offset shadow
Badge
Small tagged label
Alert
Color-coded callout
Modal
Radix dialog with sketch framing
Divider
Squiggly rule, horizontal or vertical
Progress
Outer bar plus a rougher fill
Tooltip
Radix tooltip in a sketch bubble
Sketch the frame. Keep the accessibility.
Modal, tooltip, checkbox, and radio sit on Radix primitives. Focus traps, Escape, and ARIA come for free. rough.js only draws the SVG layer behind the real controls. Pass a seed to lock a doodle for tests or screenshots. Skip it and Shuffle gives every line a new wobble.