# [Looseleaf](<https://kevintngo.github.io/looseleaf/>)

[kevintngo.github.io/looseleaf](<https://kevintngo.github.io/looseleaf/>)

MIT-licensed React components that look drawn by hand, with the same parts and props as shadcn/ui.

[UI & UX Design](<https://creatorstoolbox.com/communities/ui-ux>)[Development](<https://creatorstoolbox.com/communities/development>)[Open Source](<https://creatorstoolbox.com/communities/open-source>)

## About Looseleaf

Looseleaf is Kevin Ngo's React component library, posted November 1, 2026. The site at [kevintngo.github.io](<https://kevintngo.github.io/looseleaf/>) says it is 123 accessible React components that look drawn by hand, with the same parts and props as shadcn/ui. The README says the registry is [kevintngo.github.io](<https://kevintngo.github.io/looseleaf/r/%7Bname%7D.json>), and the install line is npx shadcn@latest add @looseleaf/button.

Components land in the repo as source. The README also counts 61 blocks, Kevin Sans, and a pencil-stub mascot named Stubby. The demo video was made with Benji Taylor's Stageshow skill.

The license file is MIT, copyright 2026 Looseleaf contributors. The README says that license covers the code, the art, and Kevin Sans, and that IBM Plex Mono is SIL Open Font License 1.1. The site and repository do not list a paid plan.

Pricing: Free. The license file is MIT, copyright 2026 Looseleaf contributors. The README says that covers the code, the art, and Kevin Sans, and that IBM Plex Mono is SIL Open Font License 1.1. The site and repository checked on November 1, 2026 do not list a paid plan.

Pricing model: Free

## Features

- 123 accessible React components with shadcn/ui parts and props

- Install with npx shadcn@latest add @looseleaf/button

- 61 blocks, Kevin Sans, and the Stubby mascot

- MIT license for the code, the art, and Kevin Sans

- Public repository kevintngo/looseleaf

- shadcn registry of hand-drawn components

- MIT license

- Same product as the Looseleaf tool listing

- README with the registry install

- Counts for components, blocks, and art

- MIT license note, plus SIL OFL for IBM Plex Mono

## FAQs

Common questions about Looseleaf

What is Looseleaf?

A React library of 123 components that look drawn by hand, with the same parts and props as shadcn/ui. Kevin Ngo posted it on November 1, 2026.

How much does Looseleaf cost?

The license is MIT, copyright 2026 Looseleaf contributors. IBM Plex Mono in the repo is SIL Open Font License 1.1.

How do I install Looseleaf?

The README says to add the @looseleaf registry, then run npx shadcn@latest add @looseleaf/button. The registry URL is https://kevintngo.github.io/looseleaf/r/{name}.json.

What license is Looseleaf under?

MIT, copyright 2026 Looseleaf contributors. The README says that covers the code, the art, and Kevin Sans. IBM Plex Mono is SIL Open Font License 1.1.

Is Looseleaf a mobile app?

No. It is a React component library. The pages checked do not list a store download.

Where is the write-up?

https://kevintngo.github.io/looseleaf/. The README is https://github.com/kevintngo/looseleaf/blob/main/README.md.

## Similar products

- [![Skullet](<https://creatorstoolbox.com/images/logos/skullet-e647bfe1df8e4eac2b4680ab59147020b8b405e5c8bbfd62a31fc64a34e8414e.svg>)

Skulletskullet.lochie.me

MIT-licensed skeleton loading states that measure your components, for React, Vue, Svelte, and vanilla JavaScript.](<https://creatorstoolbox.com/products/skullet>)

- [Stageshowbenji.org

Free MIT-licensed agent skill for faux product UI stills, cursor animations, and bento grids, in React and plain CSS.](<https://creatorstoolbox.com/products/stageshow>)

- [![useLayouts](<https://www.google.com/s2/favicons?domain=uselayouts.com&sz=128>)

useLayoutsuselayouts.com

Free animated React components and micro-interactions built with Framer Motion and Tailwind CSS, designed to work with shadcn/ui.](<https://creatorstoolbox.com/products/uselayouts>)

- [![Loading UI](<https://www.google.com/s2/favicons?domain=loading-ui.com&sz=128>)

Loading UIloading-ui.com

Free, open-source CSS and React loaders, spinners, and animations for building polished, accessible loading states.](<https://creatorstoolbox.com/products/loading-ui>)

- [![Dot Matrix](<https://dotmatrix.zzzzshawn.cloud/icon.svg>)

Dot Matrixdotmatrix.zzzzshawn.cloud

Open-source React component library of 55+ expressive dot-matrix loaders — install via the shadcn registry and own the code locally.](<https://creatorstoolbox.com/products/dotmatrix>)

- [![Skills for Designers and Engineers](<https://creatorstoolbox.com/images/logos/emil-kowalski-skills-75a9447b600d5575d919645f8325ab45f11c20a4fe6bb9ee38a6d79aa9858ba5.png>)

Skills for Designers and Engineersgithub.com/emilkowalski/skills

Free MIT-licensed agent skills for designers and engineers, covering animation taste, performance, and small interface mistakes.](<https://creatorstoolbox.com/products/emil-kowalski-skills>)

---
Canonical source: https://creatorstoolbox.com/products/looseleaf