Sketchbook UI

What is Sketchbook UI?

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.

Main Features

Categories

Platforms

Pricing