Tool Open source

Looseleaf

Looseleaf is a React, Tailwind v4, and Radix component library with a shadcn registry, making accessible interface components look hand-drawn on paper. It provides 123 components, 61 layout blocks, coded icons and illustrations, stickers and stamps, a sketchpad, a chat kit, and the Kevin Sans typeface. Components retain shadcn/ui parts, props, and data-slot names, and can be added to a project with the shadcn CLI; the generated source is copied into the application rather than installed as a dependency.

View repository Visit site Mentioned in 1 video ↓

Overview

Its drawing layer places an SVG behind the real DOM label. Seeded TypeScript recipes generate the artwork with CSS-variable colors, while pre-drawn layers controlled by CSS handle hover, press, and focus states. The library includes accessibility features such as keyboard support, visible focus, reduced motion, forced colors, RTL, text contrast, target sizing, and multiple density options.

The code, artwork, and Kevin Sans are licensed under MIT; IBM Plex Mono is licensed under SIL Open Font License 1.1. The project is developed and distributed through its GitHub repository, documentation site, and shadcn registry.

What Looseleaf is used for

1 use taken from transcripts — each links to the moment in the video.

  • Shadcn UI drawn by hand — a React component library where buttons, cards, and inputs look sketched on paper. Installs via the shadcn CLI with 123 components, 61 blocks, hand-drawn icons, doodles, stickers, and its own handwritten font.

Videos mentioning Looseleaf

1 in the library.