Installation

kasumi/ui のコンポーネントをプロジェクトに追加する方法を説明します。

前提条件

kasumi/ui を使うには、以下の環境が必要です。

• React 19 以上
• Tailwind CSS 4
• TypeScript（推奨）

セットアップ

1. shadcn CLI の初期化

プロジェクトにまだ shadcn の設定がない場合は、初期化します。

npx shadcn@latest init

2. テーマの追加

kasumi/ui の日本語最適化テーマ（タイポグラフィスケール・カラーパレット）をインストールします。

npx shadcn@latest add https://kasumi-ui.vercel.app/r/theme.json

これにより、Minor Third（×1.2）のモジュラースケールや日本語向けの行間設定がプロジェクトに追加されます。

3. コンポーネントの追加

必要なコンポーネントを個別にインストールします。

npx shadcn@latest add https://kasumi-ui.vercel.app/r/button.json

依存する他のコンポーネントやユーティリティ（cn() 関数など）は自動的にインストールされます。

手動セットアップ

CLI を使わずに手動でセットアップすることもできます。

1. 依存パッケージのインストール

pnpm add clsx tailwind-merge

2. cn() ユーティリティの追加

src/lib/utils.ts を作成します。

import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}

3. コンポーネントファイルのコピー

src/components/ui/ ディレクトリに、使いたいコンポーネントのソースコードをコピーします。各コンポーネントのドキュメントページからコードを参照できます。