shadcn/ui（シャドシーエヌ ユーアイ）は、Tailwind CSSとRadix UIをベースに作られたReactコンポーネント集を、npmパッケージではなく「ソースコードをそのままプロジェクトへコピーする」形で配布する変わり種ライブラリです。アメリカのデザインエンジニアshadcn（本名Hunter Heaps）氏が2023年に公開し、「依存パッケージとして取り込まないので自由に改変できる」というアプローチが大反響を呼びました。Vercelや多数のスタートアップが採用し、React UIライブラリの常識を覆した、2020年代後半を象徴するプロジェクトです。
この記事の目次
- Tailwind＋Radixのコピペ配布
- 2023年公開、Vercelが後押し
- 新規React案件の典型用途
- MUI・Chakraとの違い
- まとめ
Tailwind＋Radixのコピペ配布
shadcn/uiは3つの要素から成り立っています。1つ目はRadix UIで、Modnik社が提供するアンスタイルドなアクセシブルコンポーネント集です。Dialog、Menu、Tooltip、Popoverといった複雑な部品をARIA準拠で実装した低レベル基盤を提供します。2つ目はTailwind CSSで、ユーティリティクラスで見た目を組み立てるためのCSSフレームワークです。
3つ目が独自の配布方法で、shadcn CLIを使って「npx shadcn add button」のようにコマンドを実行すると、ButtonコンポーネントのソースコードがTailwindクラス付きで自プロジェクトのcomponents/uiフォルダへコピーされます。ライブラリとしてnpmからインポートするのではなく、自分の所有物として取り込むため、デザイン調整・機能追加・依存削減などを自由に行え、後でメジャーアップデートに引き摺られて壊れる心配もありません。「コンポーネントの著作権ごとプロジェクトに引っ越す」という発想が、従来のUIライブラリと大きく異なる点です。
2023年公開、Vercelが後押し
shadcn/uiは2023年初頭、アメリカのデザインエンジニアshadcn（Hunter Heaps）氏が個人プロジェクトとして公開しました。公開直後からTwitter（現X）やYouTubeのフロントエンド系インフルエンサーが取り上げ、「ソースコードを自分のものにできる」という発想が「依存爆発時代」への解として急速に支持を集めます。GitHubのスター数は爆発的に伸び、半年以内に数万スターを獲得しました。
Vercel社は2023年後半にshadcn氏を雇用し、shadcn/uiを公式エコシステムの一部に組み込みました。Vercelが提供するAI UI生成サービス「v0」はshadcn/uiコンポーネントをデフォルトで使い、「v0で生成→shadcn CLIで自プロジェクトに取り込み→Tailwindで自由に調整」というワークフローが定着します。2024年にはNext.jsの公式チュートリアル系教材でもshadcn/uiが頻繁に登場するようになり、「Next.js＋Tailwind＋shadcn/ui」が新世代のReactフロントエンド標準スタックとして広く認識されるようになりました。
新規React案件の典型用途
shadcn/uiが特に好まれるのは、Next.js App Routerで新規SaaSを立ち上げる場面です。TailwindとRadixの組み合わせはサーバーコンポーネントとの相性も良く、コピーされたコンポーネントが手元のリポジトリに置かれるため、依存パッケージのバージョン互換性問題に悩まされずに済みます。コンポーネントをそのまま改変できるため、自社デザインシステムの土台として取り込み、ブランド独自のUIへ育てるチームも多くあります。
Vercelのv0や、他のAI UI生成ツールが出力するコードがshadcn/uiを前提にしている事も多いため、AI支援開発を取り入れたいチームにとっても自然な選択肢です。管理画面・ダッシュボード・ブランドサイト・ランディングページなど用途は広く、「Next.js × Tailwind × shadcn/ui」というスタックは2024年以降、ReactのSaaS開発で最も急成長したパターンの1つになりました。
MUI・Chakraとの違い
MUIやChakra UIのような従来型のUIライブラリと比べ、shadcn/uiは設計哲学が根本的に異なります。MUI／Chakraはnpmパッケージとして読み込み、ライブラリが提供するコンポーネントをそのまま使うのに対し、shadcn/uiは「テンプレートをコピペして、自プロジェクトのコードとして所有する」スタンスです。そのため後からの改変が完全に自由で、ライブラリ側のアップデートで予期せず壊れることがありません。
業務UIの厚みではMUI Xに、Propsスタイリングの書きやすさではChakraに、Hooksの充実度ではMantineに、それぞれ局所的には及ばない場合もあります。しかし「TailwindとRadixを組み合わせた現代的なスタックで、自由度を最大化したい」場面では、shadcn/uiが最有力です。v0をはじめとするAI UI生成との親和性も他ライブラリを大きく上回り、「2020年代後半のReact UI設計を語るうえで欠かせない新世代の代表格」として急速に地位を確立しました。
まとめ
shadcn/uiはshadcn氏が2023年に公開した、Tailwind＋Radix UIをベースにコピペで取り込む新世代のReactコンポーネント配布形態です。Vercel公式採用とAI生成UI（v0）との親和性で急成長し、Next.jsアプリの新標準スタックの一翼を担うようになりました。「コンポーネントを所有する」発想は今後のUIライブラリの方向性を変える可能性があり、注目すべき存在です。
※本記事はIT用語辞典の手書きドラフトです。公開前に最新情報・出典を確認のうえ加筆修正してください。
コメント