「コンポーネントライブラリではなく、自分のコンポーネントライブラリの作り方」。shadcn/ui は、コピー＆ペーストで“自分のコードとして所有する”UIコンポーネント集です。v0 や 21st.dev の土台にもなっており、AI時代のフロントエンドの事実上の標準になりつつあります。
shadcn/ui とは
shadcn/ui は、React 向けのオープンソースのUIコンポーネント集です。最大の特徴は、npmで入れて隠蔽する“依存ライブラリ”ではなく、コンポーネントのコードを自分のプロジェクトにコピーして所有すること。中身を自由に編集でき、ブラックボックスになりません。Radix UI（アクセシブルな土台）と Tailwind CSS で作られています。
仕組みと使い方
- 初期化：
npx shadcn@latest init（components.jsonが作られ、テーマやパスを設定）。 - 追加：
npx shadcn@latest add button dialogのように、必要な部品だけを取り込む。 - 取り込まれたコードは自分のリポジトリ内にあるので、自由に改変・拡張できる。
テーマは CSS変数で管理し、ダーク/ライトや配色を一元的に切り替えられます。「レジストリ」から自社用の部品を配布する運用も可能です。
なぜAIと相性が良いのか
v0 など多くのAIビルダーが、生成コードの土台に shadcn/ui を採用しています。コードが標準的で読みやすく、所有・編集できるため、AIが生成した後も人が手を入れやすいのが理由です。21st.dev のようなコンポーネント・マーケットも shadcn/ui を共通言語にしています。
使いどころ・注意点
- 向く：自分でコンポーネントを所有・カスタムしたいモダンなReact/Next.jsプロジェクト。
- 注意：コピー方式ゆえ、アップデートは自動では降ってこない（手動で取り込み直す）。Tailwind/Reactの前提知識があると活きる。
主な情報源
コマンド・仕様は公開時点のものです。最新は公式ドキュメントを確認してください。収集・要約はAI、公開判断は人。