Sketchbook UI
UI library that looks like it was drawn by hand
FreeWeb
- Upvotes
- 3
- Comments
- 2
- Impressions
- 26
this week
discussions
this week
About
Sketchbook UI is a React component library that makes your interface look hand-drawn, as if it was sketched in a notebook. It provides 20 fully-typed TypeScript components with authentic wobbly borders, paper textures, and pencil-line details that give your UI a unique, artistic aesthetic instead of the typical flat, sterile look. The library focuses on ease of use: install via npm, import the CSS, and start using components immediately with full TypeScript support and IntelliSense. Every component accepts colors and typography props for customization, allowing you to match your brand while maintaining the sketchy aesthetic. The library includes form controls (Button, Input, Textarea, Checkbox, Switch, Select, RadioGroup, Slider), data display components (Badge, Avatar, Card, Divider, Progress, Skeleton, Spinner, Tooltip), feedback components (Toast with a useToast hook, Modal), and navigation components (Dropdown with virtualized scrolling, Accordion). It's built with zero runtime dependencies beyond React, ships as tree-shakeable ESM and CJS modules under 70KB gzipped, and includes comprehensive Storybook documentation with live examples for every component variant. The hand-drawn effect is achieved through SVG path manipulation for wobbly borders, noise texture overlays for paper feel, and subtle animations that maintain the sketch aesthetic. Components support keyboard navigation, proper ARIA attributes for accessibility, and both controlled and uncontrolled modes where applicable. The library is MIT licensed, fully open source, and designed for side projects, landing pages, portfolios, or any application where you want your interface to have personality and stand out from conventional design systems.
Awards
2 awardsRecognition this tool has earned on NextGen Tools.
Problem & solution
Problem
React apps look the same; adding personality needs custom components.
Solution
Hand-drawn React library with wobbly textures, and pencil details. Customizable, production-ready.
Who it's for
Devs building creative portfolios, SaaS, and side projects where standing out beats corporate style.
Main features
- 20 hand-drawn React components
- Full TypeScript support
- Zero runtime dependencies
- Under 70KB gzipped
- Customizable color, typography
Use cases
- Side projects and content site with artistic flair
- Blogs, portfolios, designs and creative tools
Comments
2 shownShare your thoughts about this tool.
Sign in to leave a comment.
