概要
v0 は shadcn/ui をベースとした高品質なコンポーネントを生成します。shadcn/ui のコンポーネント体系を理解することで、より精度の高いプロンプトを書けるようになります。
shadcn/ui 活用の手順
- v0 のプロンプトで使いたいコンポーネント名を明示する（例: 「Dialog」「DataTable」「Command」）
- 生成されたコードを Next.js プロジェクトにコピーして
npx shadcn@latest addで依存を追加する - 「shadcn の Toast コンポーネントを使ってエラー通知を実装して」のように指定する
- テーマカラーはプロンプトで「neutral カラーパレット・青系アクセント」のように指定する
- カスタムバリアントが必要な場合はチャットで「outline バリアントのボタンを追加して」と依頼する
よく使う shadcn/ui コンポーネント
- DataTable: ソート・フィルター付きのデータテーブル
- Combobox: 検索可能なドロップダウン選択UI
- Sheet: サイドバー形式のスライドパネル
- Calendar + DatePicker: 日付選択UI