About this project

Sketchbook UI is a React component library styled to look hand-drawn, aimed at side projects and landing pages where a sketchy, notebook-like look is the point. What it ships - 20 components, written in TypeScript with exported prop interfaces. - Form controls: Button, Input, Textarea, Checkbox, Switch, Select, RadioGroup, Slider. - Data display: Badge, Avatar, Card, Divider, Progress, Skeleton (plus SkeletonText and SkeletonCard), Spinner, Tooltip. - Feedback: Toast (with ToastContainer and a useToast hook) and Modal. - Navigation: Dropdown and Accordion (with AccordionItem). Visual approach The look comes from hand-drawn SVG borders, paper textures and subtle animations rather than from a stock design-token set. Components expose `colors` and `typography` props for customization, so a button can be given its own background, stroke, text color, font size and font family (the README's example uses a cursive font such as Caveat). A `SketchProvider` wraps an app to supply shared styling context. Installation and setup Install with npm, yarn or pnpm (`npm install sketchbook-ui`), with react and react-dom as peer dependencies. The README instructs importing the stylesheet once in the main entry file: `import "sketchbook-ui/style.css";` Then import components from the package and place them inside `SketchProvider`. Because the stylesheet import is a separate step, forgetting it is a likely first-run mistake. Bundle and runtime notes The README states the library has no runtime dependencies beyond React, is built with tree-shaking support so only imported components end up in the bundle, and weighs under 70 kB gzipped. Tree-shaking is illustrated with a named import of a single component. These are the project's own claims; verify against your bundler and version before relying on the numbers. Documentation and license All components and variants are browsable in a hosted Storybook. Contribution instructions live in CONTRIBUTING.md, and the project is released under the MIT license. Good fit / less good fit This is a good fit if you want a distinctive hand-sketched interface for a prototype, personal site or playful product, and you are already working in React with TypeScript. It is a poorer fit for dense enterprise dashboards, data-heavy tables, or teams that need a large, accessibility-audited, long-established component set — the README does not describe accessibility testing, theming beyond per-component props, or a component breadth comparable to mainstream design systems.