Repolode
Submit
kevintngo

kevintngo/looseleaf

A hand-drawn look for shadcn/ui: 123 accessible React and Tailwind components styled like pen drawings on paper, plus a shadcn registry.

View on GitHubWebsite
Stars
538
Forks
31
Open issues
1
Last commit
6 days ago

What is it?

Looseleaf is a component library built on React, Tailwind v4 and Radix that keeps the parts, props and data-slot names of shadcn/ui. Surfaces look like paper and outlines look drawn with a pen, with optional stickers and stamps. Because the API matches shadcn/ui, existing JSX can usually be switched over without changes.

The library covers every shadcn/ui component plus paper objects, marks, a sketchpad and a chat kit, along with 61 ready-made blocks such as sidebars, logins, dashboards and pricing sections. It also ships 160 icons, 48 doodles, 88 stickers and a hand-drawn typeface called Kevin Sans. Components are added with the shadcn CLI from a registry URL and land in the project as source code.

Drawings are generated by a seeded TypeScript function that outputs SVG colored through CSS variables, so the same seed produces the same line on the server and in the browser. Hover, press and focus states are handled in CSS. The project also documents keyboard support, visible focus, reduced motion, forced colors, RTL and three density settings.

Key features

  • 01Drop-in replacement for shadcn/ui components with the same parts, props and data-slot names.
  • 02Hand-drawn SVG visuals generated from a seeded function, consistent across server and browser.
  • 03Includes 61 ready-made blocks such as dashboards, logins and pricing pages.
  • 04Ships 160 icons, 48 doodles, 88 stickers and the Kevin Sans typeface.
  • 05Adds components through the shadcn CLI and copies source into your repo.
  • 06Accessibility support covers keyboard use, visible focus, reduced motion, forced colors and RTL.

Use cases

  • Building a product UI that needs a hand-drawn, notebook-like visual style on top of shadcn/ui.
  • Starting a landing page or dashboard with prebuilt blocks in a paper theme.
  • Adding stickers, stamps or doodles to an app without writing SVG by hand.

Quick start

  1. 1

    Add the @looseleaf registry to components.json

  2. 2

    Add a component with the shadcn CLI

    npx shadcn@latest add @looseleaf/button
  3. 3

    Install dependencies in the project repo

    npm install
  4. 4

    Start the documentation site locally

    npm run dev

Things to know

  • Components are copied into your repo as source, so you maintain that code yourself.

Topics

#react#tailwind#radix-ui#component-library#shadcn#design-system#ui-kit#typescript

FAQ

What is looseleaf?
A hand-drawn look for shadcn/ui: 123 accessible React and Tailwind components styled like pen drawings on paper, plus a shadcn registry. Looseleaf is a component library built on React, Tailwind v4 and Radix that keeps the parts, props and data-slot names of shadcn/ui. Surfaces look like paper and outlines look drawn with a pen, with optional stickers and stamps. Because the API matches shadcn/ui, existing JSX can usually be switched over without changes.
Is looseleaf free to use? What license does it have?
looseleaf is open source under the MIT license. Check the license terms before using it in commercial products.
Is looseleaf still maintained?
Actively maintained. The last commit to looseleaf was on Nov 1, 2026.
What can I use looseleaf for?
Building a product UI that needs a hand-drawn, notebook-like visual style on top of shadcn/ui. Starting a landing page or dashboard with prebuilt blocks in a paper theme. Adding stickers, stamps or doodles to an app without writing SVG by hand.
How do I install looseleaf?
Add the @looseleaf registry to components.json Add a component with the shadcn CLI: npx shadcn@latest add @looseleaf/button Install dependencies in the project repo: npm install Start the documentation site locally: npm run dev
Where can I get looseleaf?
The source code and installation instructions are on GitHub: https://github.com/kevintngo/looseleaf

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects