kevintngo/looseleaf

これは何？

主な機能

• 01パーツ、props、data-slot名が同じで、shadcn/uiコンポーネントの置き換えに使えます。
• 02seedを指定して生成する手描き風SVGにより、サーバーとブラウザで一貫した見た目を実現します。
• 03ダッシュボード、ログイン画面、料金ページなど、すぐに使えるブロックを61種類収録しています。
• 04アイコン160種類、落書き48種類、ステッカー88種類、Kevin Sansフォントを収録しています。
• 05shadcn CLIでコンポーネントを追加し、ソースコードをリポジトリに取り込めます。
• 06キーボード操作、視認できるフォーカス、動きの軽減、強制カラー、RTLに対応しています。

ユースケース

• shadcn/uiをベースに、手描き風でノートのような見た目のプロダクトUIを構築する。
• 紙をテーマにした既成ブロックを使って、ランディングページやダッシュボードを作り始める。
• SVGを手作業で書かずに、アプリへステッカー、スタンプ、落書きを追加する。

クイックスタート

1. 1

   components.json に @looseleaf レジストリを追加する

2. 2

   shadcn CLI でコンポーネントを追加する

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

   プロジェクトのリポジトリに依存関係をインストールする

   npm install
4. 4

   ドキュメントサイトをローカルで起動する

   npm run dev

使う前に知っておきたいこと

• !コンポーネントはソースコードとしてリポジトリにコピーされるため、そのコードは自分で管理する必要があります。

トピック

よくある質問

looseleaf とは？

shadcn/uiに手描き風の見た目を加えるライブラリ。紙にペンで描いたような、アクセシブルなReact・Tailwindコンポーネント123種類とshadcnレジストリを提供します。 Looseleafは、React、Tailwind v4、Radixをベースにしたコンポーネントライブラリです。shadcn/uiと同じパーツ、props、data-slot名を維持しています。表面は紙のように、輪郭はペンで描いたように見え、ステッカーやスタンプも任意で追加できます。APIがshadcn/uiと一致するため、既存のJSXは通常、変更せずに切り替えられます。

looseleaf は無料で使えますか？ライセンスは？

looseleaf は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。

looseleaf は今もメンテナンスされていますか？

活発にメンテナンス中。looseleaf の最終コミットは 2026年11月1日 です。

looseleaf は何に使えますか？

shadcn/uiをベースに、手描き風でノートのような見た目のプロダクトUIを構築する。 紙をテーマにした既成ブロックを使って、ランディングページやダッシュボードを作り始める。 SVGを手作業で書かずに、アプリへステッカー、スタンプ、落書きを追加する。

looseleaf のインストール方法は？

components.json に @looseleaf レジストリを追加する shadcn CLI でコンポーネントを追加する: npx shadcn@latest add @looseleaf/button プロジェクトのリポジトリに依存関係をインストールする: npm install ドキュメントサイトをローカルで起動する: npm run dev

looseleaf はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/kevintngo/looseleaf