sketchbook-ui

Sketchbook UIは、サイドプロジェクトやランディングページ向けに、手描きでノートのような見た目が重要なReactコンポーネントライブラリだ。 提供されるもの TypeScriptで書かれた20コンポーネント、公開されているpropインターフェース付き。フォームコントロールはButton、Input、Textarea、Checkbox、Switch、Select、RadioGroup、Slider。データ表示はBadge、Avatar、Card、Divider、Progress、Skeleton（SkeletonTextとSkeletonCardを含む）、Spinner、Tooltip。フィードバックはToast（ToastContainerとuseToastフック付き）とModal。ナビゲーションはDropdownとAccordion（AccordionItem付き）。 ビジュアルの方向性 手描きSVGボーダー、紙テクスチャ、控えめなアニメーションにより実現される見た目。Stockなdesign-tokenセットではない。コンポーネントは`colors`と`typography` propを持ち、ボタンには独自の背景、ストローク、テキストカラー、フォントサイズ、フォントファミリーを設定可能（READMEの例ではCaveatのような筆記体フォントを使用）。`SketchProvider`がアプリを囲み、共有スタイリングコンテキストを供給する。 インストールとセットアップ npm、yarn、pnpmでインストール（`npm install sketchbook-ui`）。reactとreact-domはpeer依存。READMEではメインエントリファイルで一度だけスタイルシートをインポートするよう指示： `import "sketchbook-ui/style.css";` その後、パッケージからコンポーネントをインポートし、`SketchProvider`内に配置する。スタイルシートのインポートが別ステップのため、忘れるのは最初の失敗例になりうる。 バンドルとランタイムのノート READMEによれば、ランタイム依存はReactのみ。ツリーシェイク対応で、インポートされたコンポーネントのみがバンドルに含まれる。70kB未満（gzip）。ツリーシェイクは単一コンポーネントの名前インポートで示されている。これらはプロジェクト自身の主張であり、信頼する前にバンドラとバージョンで検証すべき。 ドキュメントとライセンス 全コンポーネントとバリアントはホスト済みStorybookで閲覧可能。貢献手順はCONTRIBUTING.mdに記載。MITライセンスで公開。 適した用途／不適な用途 プロトタイプ、個人サイト、お遊びのプロダクト向けのユニークな手描きインターフェースが望ましく、既にTypeScriptのReactで作業している場合は適している。高密度のエンタープライズダッシュボード、データ重視のテーブル、大規模でアクセシビリティ監査済みの長年あるコンポーネントセットを必要とするチームには不向き——READMEはアクセシビリティテスト、per-component prop以外のtheming、主流のデザインシステム同等のコンポーネント幅を記載していない。