kasumi/uiIntroduction
kasumi/ui は、日本語のためのUIコンポーネントライブラリです。shadcn/ui の設計思想をベースに、日本語で使うことを前提にした調整を加えています。
shadcn/ui, MUI, BootStrap など、優れたUIライブラリの多くは英語圏で生まれています。それらをそのまま日本語のプロダクトに持ち込むと、余白や行間が窮屈だったり、小さなところで違和感が出ます。CSSを上書きすれば直せますが、それはコンポーネントの外側にパッチを当てているだけです。
kasumi/ui は、最初から日本語で使うことを前提にコンポーネントを設計しています。
日本語のためのタイポグラフィ
日本語と英語では、読みやすい行間が違います。英語のデフォルトでは日本語の本文が詰まって見える。kasumi/ui では Minor Third（×1.2）のモジュラースケールを採用し、本文には line-height 2.5、UI テキストには 2.0 を設定しています。見出しはデフォルトのまま。用途ごとに行間を分けることで、日本語のテキストが自然に読めるようになっています。
引き算のデザイン
コンポーネントに機能を足すのは簡単です。clearableなInput、ローディング付きのButton、自動バリデーション付きのField。でも、使わない機能のためにAPIが複雑になるのは避けたい。
kasumi/ui では YAGNI（You Aren't Gonna Need It） を徹底しています。実際に必要になるまで機能を追加しない。ピル型ボタンは rounded-full を外から渡せばいいし、Typographyコンポーネントは作らなくてもTailwindのクラスで事足りる。多用するようになったら、そのときにpropに昇格させます。
自作とライブラリの線引き
すべてを自作する必要はないし、すべてをライブラリに任せる必要もありません。kasumi/ui では、コンポーネントの性質によって明確に使い分けています。
- CSSとHTMLで完結するものは自作する。Button、Input、Badge、Checkbox など。見た目と振る舞いの両方を完全にコントロールできる。
- 複雑な振る舞いが必要なものは Radix UI に委ねる。フォーカストラップ、Portal、スクロールロック、キーボードナビゲーション。これらを自前で正しく実装するのは難しいし、アクセシビリティの担保にもなる。
見た目はすべて自前のデザイントークンで制御し、Radix UI はヘッドレスとして振る舞いだけを担当します。Select、Dialog、Toast、Tooltip などがこのパターンです。
使い方
shadcn CLI を使ってコンポーネントを追加できます。
npx shadcn@latest add https://kasumi-ui.vercel.app/r/buttonセットアップ手順や手動インストールについては Installation を参照してください。