Repolode
Enviar
kevintngo

kevintngo/looseleaf

Un estilo dibujado a mano para shadcn/ui: 123 componentes accesibles de React y Tailwind con aspecto de dibujos a bolígrafo sobre papel, además de un registry de shadcn.

Ver en GitHubSitio web
Estrellas
517
Forks
29
Issues abiertos
1
Último commit
hace 6 días

¿Qué es?

Looseleaf es una biblioteca de componentes basada en React, Tailwind v4 y Radix que conserva las partes, props y nombres de data-slot de shadcn/ui. Las superficies parecen de papel y los contornos, dibujados a bolígrafo; además, se pueden añadir stickers y sellos. Como su API coincide con la de shadcn/ui, normalmente se puede cambiar el JSX existente sin modificarlo.

La biblioteca incluye todos los componentes de shadcn/ui, además de objetos de papel, marcas, un sketchpad y un kit de chat, junto con 61 bloques listos para usar, como barras laterales, pantallas de inicio de sesión, dashboards y secciones de precios. También incluye 160 iconos, 48 garabatos, 88 stickers y una tipografía dibujada a mano llamada Kevin Sans. Los componentes se agregan con el CLI de shadcn desde una URL de registry y se incorporan al proyecto como código fuente.

Los dibujos se generan con una función de TypeScript con seed que produce SVG con colores definidos mediante variables CSS, de modo que la misma seed genera el mismo trazo en el servidor y en el navegador. Los estados de hover, press y focus se controlan con CSS. El proyecto también documenta la compatibilidad con el teclado, el foco visible, la reducción de movimiento, los colores forzados, RTL y tres ajustes de densidad.

Funciones clave

  • 01Reemplazo directo de los componentes de shadcn/ui, con las mismas partes, props y nombres de data-slot.
  • 02Elementos visuales SVG dibujados a mano y generados con una función con seed, coherentes en el servidor y el navegador.
  • 03Incluye 61 bloques listos para usar, como dashboards, pantallas de inicio de sesión y páginas de precios.
  • 04Incluye 160 iconos, 48 garabatos, 88 stickers y la tipografía Kevin Sans.
  • 05Agrega componentes mediante el CLI de shadcn y copia el código fuente en tu repositorio.
  • 06La compatibilidad con tecnologías de accesibilidad abarca el uso del teclado, el foco visible, la reducción de movimiento, los colores forzados y RTL.

Casos de uso

  • Crear una interfaz de producto con un estilo visual dibujado a mano, similar a un cuaderno, basada en shadcn/ui.
  • Empezar una landing page o un dashboard con bloques prediseñados y una estética de papel.
  • Añadir stickers, sellos o garabatos a una aplicación sin tener que escribir SVG a mano.

Inicio rápido

  1. 1

    Añade el registro @looseleaf a components.json

  2. 2

    Añade un componente con shadcn CLI

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

    Instala las dependencias en el repositorio del proyecto

    npm install
  4. 4

    Inicia el sitio de documentación localmente

    npm run dev

Antes de usarlo

  • Los componentes se copian en tu repositorio como código fuente, así que tendrás que mantener ese código por tu cuenta.

Temas

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

Preguntas frecuentes

¿Qué es looseleaf?
Un estilo dibujado a mano para shadcn/ui: 123 componentes accesibles de React y Tailwind con aspecto de dibujos a bolígrafo sobre papel, además de un registry de shadcn. Looseleaf es una biblioteca de componentes basada en React, Tailwind v4 y Radix que conserva las partes, props y nombres de data-slot de shadcn/ui. Las superficies parecen de papel y los contornos, dibujados a bolígrafo; además, se pueden añadir stickers y sellos. Como su API coincide con la de shadcn/ui, normalmente se puede cambiar el JSX existente sin modificarlo.
¿looseleaf es gratuito? ¿Qué licencia tiene?
looseleaf es open source bajo la licencia MIT. Revisa los términos de la licencia antes de usarlo en productos comerciales.
¿looseleaf sigue mantenido?
Mantenimiento activo. El último commit de looseleaf fue el 1 nov 2026.
¿Para qué puedo usar looseleaf?
Crear una interfaz de producto con un estilo visual dibujado a mano, similar a un cuaderno, basada en shadcn/ui. Empezar una landing page o un dashboard con bloques prediseñados y una estética de papel. Añadir stickers, sellos o garabatos a una aplicación sin tener que escribir SVG a mano.
¿Cómo se instala looseleaf?
Añade el registro @looseleaf a components.json Añade un componente con shadcn CLI: npx shadcn@latest add @looseleaf/button Instala las dependencias en el repositorio del proyecto: npm install Inicia el sitio de documentación localmente: npm run dev
¿Dónde consigo looseleaf?
El código fuente y las instrucciones de instalación están en GitHub: https://github.com/kevintngo/looseleaf

Resumen generado por IA a partir del README del proyecto. Las estadísticas de GitHub se actualizan a diario.

Proyectos relacionados