What is sketchbook-ui?

Sketchbook UI is a collection of ready-made interface components for building websites that look like they were drawn by hand on paper. Most website component libraries aim for a clean, polished digital look. This one goes the opposite direction: every button, form field, card, and pop-up has wobbly borders, paper-like textures, and pencil-line details, giving your site a playful, hand-crafted notebook aesthetic. It includes 20 components covering the most common interface needs: buttons, text inputs, checkboxes, dropdown menus, modals (pop-up windows), toasts (brief notification messages), accordions (expandable sections), progress bars, and more. All components accept color and font customization through props, so you can tune the look without digging into stylesheets. The whole library adds less than 70 kilobytes to your page when compressed, has no dependencies beyond React itself, and only bundles the components you actually use. Installing it is a normal npm, yarn, or pnpm package install, plus React itself as a peer dependency. After that you import one CSS file and wrap your components in a provider that the library ships. Documentation for every component and its variants lives in a Storybook site linked from the README, so you can see what each one looks like before adding it to your project. You would reach for this when building a personal project, landing page, portfolio, or creative tool where you want to stand out from the crowd of identical-looking sites. It is written in TypeScript with full type definitions and works with any React application. It is released under the MIT license.