Hand-Drawn Shadcn-like UI Component Registry – Looseleaf

Looseleaf is a hand-drawn React UI component library for notebook-style forms, dashboards, and chat apps with matching controls, paper objects, and ready-made app blocks.

Built with React, Tailwind CSS, and Radix UI, it installs editable TSX through a shadcn registry and retains familiar shadcn/ui props and data-slot names.

Features

• 120+ UI components for forms, navigation, charts, chat, page layouts, and paper objects.
• 60+ ready-made blocks for authentication, sidebars, dashboards, settings, landing pages, and messaging.
• Seeded TypeScript drawing recipes that render pen-style SVG strokes behind real DOM content.
• 160+ illustrated icons, 40+ doodles, 80+ stickers, and the Stubby mascot.
• Kevin Sans font styles for control labels, handwritten headings, and stamp-like text.
• Configurable drawing density, ink colors, reduced-motion behavior, and right-to-left layouts.
• Individual component installs with local TSX files and registry-managed dependencies.

Available UI Components

Actions

Forms

Feedback

Overlays

Navigation

Layout

Data display

Charts

Paper

Marks

Stickers & doodles

Chat

Interactive

Typography

Icons

Ready-Made Blocks

Install a block by its registry name, such as npx shadcn@latest add @looseleaf/login-01. Block files go into components/blocks/ with their declared component dependencies.

Authentication

Sidebars

Dashboards

Apps

Settings

Marketing

Feedback

Commerce

How to Install Looseleaf

Initialize shadcn/ui:

npx shadcn@latest init

Register the @looseleaf namespace:

npx shadcn@latest registry add "@looseleaf=https://kevintngo.github.io/looseleaf/r/{name}.json"

Alternatively, merge this registry namespace into your existing components.json:

{
  "registries": {
    "@looseleaf": "https://kevintngo.github.io/looseleaf/r/{name}.json"
  }
}

Install a Button, a Paper container, or a ready-made login block:

npx shadcn@latest add @looseleaf/button
npx shadcn@latest add @looseleaf/paper
npx shadcn@latest add @looseleaf/login-01

To install the full library, including the Notebook theme, fonts, ink engine, and UI components, use the umbrella item. This replaces your shadcn color tokens with Looseleaf’s palette:

npx shadcn@latest add @looseleaf/looseleaf

Basic Usage in Next.js

Wrap the app with InkProvider in a client component. The example below uses the button and paper components.

app/providers.tsx

"use client"
import { InkProvider } from "@/lib/ink/react"
export function Providers({ children }: { children: React.ReactNode }) {
  return <InkProvider density="comfortable">{children}</InkProvider>
}

app/layout.tsx

import { Providers } from "./providers"
import "./globals.css"
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <Providers>{children}</Providers>
      </body>
    </html>
  )
}

app/page.tsx

import { Button } from "@/components/ui/button"
import { Paper } from "@/components/ui/paper"
export default function HomePage() {
  return (
    <Paper stock="index-card" tape="both" className="max-w-md p-6">
      <h1 className="font-script text-2xl font-bold">Project notes</h1>
      <p className="my-4">Draft the next dashboard layout.</p>
      <Button variant="secondary">Save note</Button>
    </Paper>
  )
}

InkProvider and Theme Configuration

InkProvider is the root context for pen drawings. It provides props to control rendering quality, density, themes, direction, and paper textures.

Place CSS token overrides after the Looseleaf theme in your global stylesheet:

:root {
  --ll-marker: #2f7d6b;
  --ll-hi: #f4d35e;
}

Alternatives and Related Resources

• Shadcn/ui and Base UI Component Library for Next.js – UIAble
• Shadcn UI Kit: 550+ Free UI Components, Blocks & Dashboard
• Animated React Components for shadcn/ui
• Advanced Component Library for shadcn/ui – Kibo UI