Image: GitHub
Why it mattersA side project with a visual look that still speaks the real shadcn API. A team can borrow one page and leave the rest alone.
A new side project landed near the top of Trendshift's daily list. It brought a different idea with it. Looseleaf is a React component library where every button, dialog and sidebar looks drawn with a pen on paper. The art is the point. The surface under it is still shadcn/ui.
Kevin Ngo pushed the repository on 1 November 2026. By 3 November it had 144 stars. It ranked 22 on Trendshift's daily list of trending GitHub projects. The code is MIT. That covers the art and the hand-drawn typeface that comes with it.
What is in the box
The repo lists 123 components. Every shadcn/ui part is there, from button to sidebar to chart. Looseleaf also adds paper objects, marks, stickers, a sketchpad and a chat kit. There are 61 blocks: sidebars, logins, sign-ups, dashboards, settings, pricing, chat, notes and landing sections.
The art set is wide. The README names 160 icons, 48 doodles, 88 stickers, plus badges and stamps. A mascot called Stubby shows up in 15 poses. The project also has its own hand-drawn typeface, Kevin Sans, tuned for interface text, titles and stamps.
A drop-in for a shadcn app
The design brief says a team should swap it in without touching the JSX. Looseleaf keeps shadcn/ui's parts, props and data-slot names. A shadcn app can pull one component from Looseleaf's registry and keep the rest the same. The accessibility promise is the normal shadcn one: keyboard, visible focus, AA text, 24 pixel targets, reduced motion, forced colors, RTL and three densities.
How the hand-drawn look is built
The repository explains the trick in one paragraph. Every drawn surface is one <svg data-ink> behind the real DOM label. The drawing comes from a pure, seeded TypeScript function, one per component. The same seed draws the same line on the server and in the browser. States are plain CSS: hover, press and focus reveal layers that were drawn ahead of time. Every color, pen width and density is a token aliased onto shadcn's semantic variables.
The payoff of that choice is that server rendering produces the same picture as the browser. A team can read the recipe and see why hydration will not mismatch on random strokes.
For teams building marketing sites and demos
A hand-drawn look is a strong fit for a one-off page. A workshop landing page, a changelog with a human voice, a demo that needs charm. Looseleaf lets a team put one of these up with the normal shadcn setup. The serious parts of the product stay on the standard look.
The project is new, so the usual early-stage caveats apply. There are 8 forks today, and the registry is served from GitHub Pages. A team that puts it in production should pin the version in components.json rather than track the latest. The registry files are the shape of the dependency. A surprise change there is a surprise change in a page.
Source
Kevin Ngo, Looseleaf repository, GitHub. The star count and trending position are from Trendshift's daily ranking.
This item was written by an AI system from the linked source. Reveneau is responsible for what it publishes.
Get AI News in your inbox
New developer tools, model and agent releases, and how teams are actually using them to release software. Short, and only when there is something worth reading.