kevintngo/looseleaf

O que é?

Recursos principais

• 01Substituição direta dos componentes do shadcn/ui, com as mesmas partes, props e nomes de data-slot.
• 02Elementos visuais em SVG desenhados à mão e gerados por uma função com seed, consistentes no servidor e no navegador.
• 03Inclui 61 blocos prontos, como dashboards, telas de login e páginas de preços.
• 04Traz 160 ícones, 48 rabiscos, 88 adesivos e a fonte Kevin Sans.
• 05Adiciona componentes pelo shadcn CLI e copia o código-fonte para o seu repositório.
• 06O suporte a acessibilidade inclui uso pelo teclado, foco visível, movimento reduzido, cores forçadas e RTL.

Casos de uso

• Criar uma interface de produto com visual desenhado à mão, como em um caderno, usando shadcn/ui.
• Começar uma landing page ou um dashboard com blocos prontos em um tema de papel.
• Adicionar adesivos, carimbos ou rabiscos a um app sem escrever SVG manualmente.

Início rápido

1. 1

   Adicione o registro @looseleaf ao components.json

2. 2

   Adicione um componente com o shadcn CLI

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

   Instale as dependências no repositório do projeto

   npm install
4. 4

   Inicie o site de documentação localmente

   npm run dev

Antes de usar

• !Os componentes são copiados para o seu repositório como código-fonte, então você mesmo precisa manter esse código.

Tópicos

Perguntas frequentes

O que é looseleaf?

Visual desenhado à mão para shadcn/ui: 123 componentes acessíveis de React e Tailwind com aparência de desenhos a caneta no papel, além de um registry do shadcn. Looseleaf é uma biblioteca de componentes feita com React, Tailwind v4 e Radix, que mantém as partes, props e nomes de data-slot do shadcn/ui. As superfícies parecem papel e os contornos parecem feitos a caneta, com adesivos e carimbos opcionais. Como a API corresponde à do shadcn/ui, geralmente dá para substituir os componentes no JSX existente sem fazer alterações.

looseleaf é gratuito? Qual é a licença?

looseleaf é open source sob a licença MIT. Confira os termos da licença antes de usá-lo em produtos comerciais.

looseleaf ainda é mantido?

Manutenção ativa. O último commit de looseleaf foi em 1 de nov. de 2026.

Para que posso usar looseleaf?

Criar uma interface de produto com visual desenhado à mão, como em um caderno, usando shadcn/ui. Começar uma landing page ou um dashboard com blocos prontos em um tema de papel. Adicionar adesivos, carimbos ou rabiscos a um app sem escrever SVG manualmente.

Como instalar looseleaf?

Adicione o registro @looseleaf ao components.json Adicione um componente com o shadcn CLI: npx shadcn@latest add @looseleaf/button Instale as dependências no repositório do projeto: npm install Inicie o site de documentação localmente: npm run dev

Onde consigo looseleaf?

O código-fonte e as instruções de instalação estão no GitHub: https://github.com/kevintngo/looseleaf