kevintngo/looseleaf

Что это?

Ключевые возможности

• 01Готовая замена компонентов shadcn/ui с теми же частями, props и именами data-slot.
• 02Рисованные SVG-элементы, созданные функцией с заданным seed и одинаково отображаемые на сервере и в браузере.
• 0361 готовый блок, включая дашборды, формы входа и страницы с тарифами.
• 04В комплекте 160 иконок, 48 дудлов, 88 стикеров и шрифт Kevin Sans.
• 05Компоненты добавляются через shadcn CLI, а их исходный код копируется в ваш репозиторий.
• 06Поддержка доступности включает управление с клавиатуры, видимый фокус, уменьшение анимации, принудительные цвета и RTL.

Сценарии использования

• Создание интерфейса продукта в рисованном стиле блокнота на основе shadcn/ui.
• Быстрый старт для лендинга или дашборда с готовыми блоками в бумажной стилистике.
• Добавление стикеров, штампов или дудлов в приложение без ручного написания SVG.

Быстрый старт

1. 1

   Добавьте реестр @looseleaf в components.json

2. 2

   Добавьте компонент с помощью shadcn CLI

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

   Установите зависимости в репозитории проекта

   npm install
4. 4

   Запустите сайт документации локально

   npm run dev

Что важно знать

• !Компоненты копируются в ваш репозиторий как исходный код, поэтому вам нужно самостоятельно поддерживать этот код.

Темы

Частые вопросы

Что такое looseleaf?

Рисованный стиль для shadcn/ui: 123 доступных компонента на React и Tailwind, похожих на рисунки ручкой на бумаге, и registry для shadcn. Looseleaf — библиотека компонентов на React, Tailwind v4 и Radix, в которой сохранены части, props и имена data-slot из shadcn/ui. Поверхности выглядят как бумага, а контуры — как нарисованные ручкой; можно добавить стикеры и штампы. API совпадает с shadcn/ui, поэтому существующий JSX обычно можно переключить на Looseleaf без изменений.

looseleaf можно использовать бесплатно? Какая у него лицензия?

looseleaf распространяется с открытым исходным кодом под лицензией MIT. Перед использованием в коммерческих продуктах проверьте условия лицензии.

looseleaf всё ещё поддерживается?

Активно поддерживается. Последний коммит в looseleaf — 1 нояб. 2026 г..

Для чего можно использовать looseleaf?

Создание интерфейса продукта в рисованном стиле блокнота на основе shadcn/ui. Быстрый старт для лендинга или дашборда с готовыми блоками в бумажной стилистике. Добавление стикеров, штампов или дудлов в приложение без ручного написания SVG.

Как установить looseleaf?

Добавьте реестр @looseleaf в components.json Добавьте компонент с помощью shadcn CLI: npx shadcn@latest add @looseleaf/button Установите зависимости в репозитории проекта: npm install Запустите сайт документации локально: npm run dev

Где скачать looseleaf?

Исходный код и инструкции по установке — на GitHub: https://github.com/kevintngo/looseleaf