インストール
Gyoza UIコンポーネントの導入方法
インストール
Gyoza UIコンポーネントをプロジェクトに導入する方法を説明します。
前提条件
以下がインストールされている必要があります：
- Node.js 18以上
- React 18以上
- Tailwind CSS
CLIでのインストール
1. shadcn CLIのインストール
npm install -g shadcn2. コンポーネントのインストール
個別のコンポーネントをインストールできます：
npx shadcn@latest add https://your-registry-url.com/r/button.json3. 複数のコンポーネントを一度にインストール
npx shadcn@latest add https://your-registry-url.com/r/button.json
npx shadcn@latest add https://your-registry-url.com/r/card.json
npx shadcn@latest add https://your-registry-url.com/r/input.json手動インストール
CLIを使わずに手動でインストールすることもできます。
1. ファイルをダウンロード
各コンポーネントのソースコードをダウンロードして、プロジェクトの components フォルダに配置します。
2. 依存関係をインストール
コンポーネントに必要な依存パッケージをインストールします：
npm install @radix-ui/react-slot class-variance-authority clsx tailwind-merge3. ユーティリティ関数を追加
lib/utils.ts に以下を追加：
import { type ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs))
}