shadcn/uiとは｜コードを所有する仕組みと導入手順・使い方

shadcn/uiとは｜「ライブラリ」ではなく「コードを所有する」仕組み

結論から言えば、shadcn/uiはUIコンポーネントのソースコードを配布する仕組みです。公式ドキュメントも自らを「コンポーネントライブラリではなく、コンポーネントライブラリを構築する方法」と説明しています（shadcn/ui 公式ドキュメント）。

基本的には、ReactとTailwind CSSが動く環境で導入できます。実際にはパスエイリアスやビルド設定も確認が必要です。例外として、Tailwindを使わない方針のプロジェクトでは旨味がほとんど消えます。補足すると、ライセンスはMITで、商用利用も改変も認められています。

npmパッケージ型との決定的な違い

従来のUIライブラリは、node_modulesの中にコンポーネントが入ります。見た目を変えたければ、ライブラリが用意したテーマAPIやpropsの範囲で調整するしかありません。

shadcn/uiはここが逆です。CLIを叩くと、components/ui配下に.tsxファイルそのものが置かれます。置かれた瞬間から、それはライブラリのコードではなく、あなたのリポジトリのコードです。

結果として得られるものと失うものがはっきり分かれます。

この表の最終行が、実務では意外と効いてきます。不可解な挙動に当たったとき、node_modulesを掘らずに済むのは地味ながら大きな利点です。

土台になっている技術

shadcn/uiは、ゼロからコンポーネントを作っているわけではありません。見た目はTailwind CSS、挙動とアクセシビリティはヘッドレスUIライブラリ、という二層構造になっています。

ヘッドレスUIライブラリとは、キーボード操作やフォーカス制御、WAI-ARIA属性といった「振る舞い」だけを提供し、見た目を持たない部品群のことです。ダイアログの開閉時にフォーカスを閉じ込める、といった実装の面倒な部分を引き受けてくれます。

Tailwind CSS側の基礎はTailwind CSSとは｜特徴・他CSS手法との違い・案件単価を解説で扱っているため、ここでは深追いしません。

読み方と名称まわりの整理

日本語圏では「シャドシーエヌ・ユーアイ」と読まれることが多い名前です。作者のハンドルネームがそのままプロジェクト名になっています。

なお、CLIのパッケージ名は過去に shadcn-ui から shadcn へ変わりました。古い記事に出てくる「npx shadcn-ui@latest add」は現在の表記ではありません。コマンドをコピーするときは発行年に注意してください。

2026年7月の既定変更｜Radix UIからBase UIへ

結論として、2026年10月時点では、2026年7月の変更によりshadcn/uiの既定ヘッドレス基盤はRadix UIからBase UIへ切り替わっています。公式チェンジログは「Starting today, Base UI is the default component library in shadcn/ui.」と告知しています（July 2026 - Base UI as the Default）。

ここは2025年以前に書かれた解説記事と食い違う部分です。「shadcn/uiはRadix UIベース」という説明を見かけたら、執筆時期を確認してください。

何が変わって、何が変わらないのか

変わったのは新規プロジェクトの初期値です。2026年10月時点の公式案内ベースでは、初期化を既定設定で進めるとBase UI版が選ばれます。公式サイトのコンポーネントページも、既定でBase UIのタブが開く表示に変わりました。

変わらないのはRadixの扱いです。公式は「Radix is not being deprecated」と明記し、更新と新規コンポーネントは両方のライブラリ向けに提供し続けるとしています。移行も求められていません。

採用理由として公式が挙げているのは、Base UIが1.6.0で安定しており週間ダウンロード600万超であること、および公式のプロジェクト作成ツール経由でBase UIがRadixの2倍選ばれていることです。いずれも公式チェンジログ上で示された数値で、前者はnpmの公開ダウンロード値、後者は公式のプロジェクト作成ツール経由で作られたプロジェクトに限った選択状況を指します。市場全体の採用比率ではない点に注意してください。本記事執筆時点（2026年10月）の確認結果です。

既存プロジェクトとCIへの影響

実務で先に確認すべきは、CIやセットアップスクリプトです。初期化コマンドを非対話で実行している環境は、何もしなければBase UI版に切り替わります。Radix前提のままにしたい場合は、スクリプトに -b radix を追加してください。

既存の配置済みコンポーネントが自動で書き換わることは基本的にありません。components/ui配下のファイルは既にリポジトリにあるためです。ただし、新規コンポーネントの追加時や初期化スクリプトの再実行時は、意図した基盤が選ばれるか別途確認が必要になります。

このセクションのミニFAQ

Q. 今から始めるならBase UIとRadixのどちらを選ぶべきですか。

新規で特別な事情がなければ、既定のBase UIから始めるのが素直です。ただし、Radix前提のサードパーティ製ブロックやテンプレートを多用する予定があるなら、エコシステムの対応状況を先に確認してからのほうが安全です。

Q. Radixで作った既存プロジェクトをBase UIへ移す必要はありますか。

公式が移行不要と明言しているため、急ぐ理由はありません。移すとしても、コンポーネント単位で段階的に差し替えられます。

shadcn/uiの導入手順｜初期化からimportまで

結論として、初期化 → コンポーネント追加 → import の3ステップです。Next.jsとTailwind CSSの前提がすでに整っている実務経験者なら、最初のボタンが画面に出るまで15〜30分程度が目安になります。環境構築から始める場合や、ビルド設定に手を入れる必要がある場合はこの限りではありません。

条件は3つ。React環境があること、Tailwind CSSが動いていること、そしてtsconfig.jsonでパスエイリアス（@/*）が設定されていることです。3つめを忘れてimportが解決せず詰まる例が多いので、先に確認しておきましょう。

前提として用意するもの

Next.js側の前提が曖昧な場合は、Next.jsとは？React基盤のフレームワークの特徴・できること・年収・将来性をフリーランス視点で解説で全体像を確認してから進めてください。

初期化で決まること

既存プロジェクトでは pnpm dlx shadcn@latest init（npmなら npx shadcn@latest init）を実行します。新しくプロジェクトごと作る場合は -t next のようにテンプレートを指定できます。

初期化で対話的に決まるのは、ヘッドレス基盤（base）、スタイルのプリセット、モノレポかどうか、といった項目です。回答内容はcomponents.jsonに書き出され、以後のコンポーネント追加はこの設定に従います。

ここで決めた基盤を後から変えることは可能ですが、追加済みコンポーネントの書き換えが伴います。最初の5分の選択が後の工数を決めるので、チーム方針が固まっていないうちは初期化を急がないほうがいいでしょう。

コンポーネントの追加とimport

追加は pnpm dlx shadcn@latest add card のように、コンポーネント名を指定します。複数をまとめて指定することもできます。

実行するとcomponents/ui配下にファイルが生成され、あとは通常のReactコンポーネントとしてimportするだけです。

import { Card, CardHeader, CardTitle } from "@/components/ui/card"

通常はCLIが必要な依存を自動で追加します。モノレポや社内レジストリを使う環境では、想定どおりに入ったかを手動で確認してください。npmの依存関係が無制限に膨らむわけではなく、追加したコンポーネントが必要とする分が入る構造です。

モノレポでの入れ方

モノレポの場合は、初期化時に --monorepo を付けます。コンポーネント追加では -c apps/web のように対象ワークスペースを指定してください。

importパスはワークスペース構成に合わせて @workspace/ui/components/card のような形になります。複数アプリでUIを共有する構成では、UIパッケージ側に一度だけ追加し、各アプリからはそれを参照する設計が扱いやすくなります。

このセクションのミニFAQ

Q. Tailwind CSSのバージョンは何を使えばいいですか。

公式のインストール手順が前提とするバージョンに合わせるのが確実です。手元のTailwindが古いまま追加すると、生成されたコンポーネントのクラスが効かず、原因の切り分けに時間を取られます。着手前にshadcn/ui 公式のインストールガイドで対象バージョンを確認してください。

使い方｜カスタマイズとアップデートの実際

結論として、shadcn/uiの使い方の本体は追加した後にあります。追加までは誰がやっても同じで、差が出るのはカスタマイズとアップデートの運用です。

スタイルの変え方は「ファイルを直接編集する」

テーマAPIを探す必要はありません。components/ui配下の該当ファイルを開き、Tailwindのクラスを書き換えます。バリアント（variant）の定義もファイル内にあるため、独自のバリアントを足すのも編集一回で済みます。

これは気持ちよく進む一方で、チームで触ると差分が散らかる性質も持っています。「ui配下は共通基盤として扱い、個別案件の調整はラップしたコンポーネント側で行う」といった線引きを、早い段階で決めておくと後が楽です。

アップデートは自動では降ってこない

shadcn/uiで取り込んだコンポーネントは自分のコードになるため、上流の更新は自動反映されません。

ここが採用判断の最大の分かれ目です。コピーした時点でライブラリとの接続は切れるため、アクセシビリティの改善やバグ修正も手元には届きません。アクセシビリティの改善やバグ修正が入っても、気づかなければ古いままです。

現実的な運用は次のとおりです。

1. 公式リポジトリの更新を定期的に確認する（月1回程度でも、見ないよりは大きく違います）

2. 使っているコンポーネントに関係する変更だけを拾う

3. 手元の改変と突き合わせ、必要な差分を手で取り込む

4. 取り込んだ内容をコミットメッセージに残し、次回の比較を楽にする

逆に言えば、この運用を回す気がないプロジェクトではコピー型の利点が薄れます。短期で作って終わりなのか、数年運用するのかで評価が変わる、という理解が実態に近いでしょう。

Blocks・Charts・Themesで画面単位から組む

公式サイトでは、単体コンポーネントに加えて、画面断片や周辺アセットも提供されています。ログインフォームやダッシュボードといった画面単位のまとまり（Blocks）がその代表です。グラフ用のChartsや配色を切り替えるThemesもあり、管理画面系の初期構築では手数が目に見えて減ります。

ただし、Blocksもコピーされる以上は自分のコードです。「とりあえず全部入れる」をやると、使っていないコンポーネントが残り続けます。必要なものだけ入れる習慣をつけてください。

他のUIライブラリ・ツールとの棲み分け

結論として、shadcn/uiはTailwind CSSの代替ではなく上位レイヤー、Material UIとは配布方式そのものが違う相手、Storybookとは役割が重ならない別軸のツールです。この3点を押さえると選定で迷いません。

Material UIとの違い

MUIはマテリアルデザインに沿った完成度の高い部品群を、パッケージとして提供します。デザインの方向性が決まっていて、早く揃えたいなら強い選択肢です。

対してshadcn/uiは、デザインを自分たちで決める前提のツールです。ブランド独自のUIを作り込みたい案件ではこちらが向きますが、デザイナー不在でゼロから作ると、かえって時間がかかることもあります。MUI側の詳細はMaterial UI（MUI）とは｜Reactの定番UIライブラリ・使い方・案件動向を参照してください。

Storybook・v0との役割分担

Storybookは「組んだコンポーネントをどう見せ、どう守るか」を担当します。shadcn/uiで部品を置き、Storybookで確認する、という併用は自然な組み合わせです。確認環境側の設計はStorybookとは｜UIコンポーネント開発の基本・導入メリットを解説に委ねます。

Tailwindベースのコードを出力する生成ツールとは、組み合わせやすい傾向があります。v0 by Vercelのように生成結果がTailwindクラスで書かれていれば、そのままcomponents配下に置いて手で整えられるためです。詳しくはv0 by Vercelとは？AIによるUIコード生成の使い方・料金・案件動向を解説で触れています。

レジストリとMCPでAIエージェントに部品を渡す

shadcn/uiには、コンポーネントの配布元をレジストリとして定義する仕組みがあります。公式レジストリだけでなく、社内用のプライベートレジストリや、サードパーティのレジストリを登録して使えます。

実務上の意味は明快です。社内の共通UIをレジストリ化すれば、新しいプロジェクトでもCLI一発で同じ部品を配置できます。コピー型の弱点だった「社内標準が揃わない」問題への対処になります。

MCPサーバーでAIコーディングに組み込む

さらに、レジストリをAIアシスタントから扱うためのMCPサーバーが公式に用意されています（shadcn MCP Server）。Claude Code・Cursor・VS Code・Codexなどに設定ファイルを置くことで利用できます。

できることは、コンポーネントの一覧取得、レジストリ横断の検索、そして自然言語での追加です。「ログインフォームを追加して」と伝えると、該当するブロックを探して配置するところまで進みます。

プライベートレジストリは環境変数で認証トークンを設定できるため、社内部品をAIエージェントに渡す用途にも使えます。AIコーディングを業務に組み込んでいるチームにとっては、ここが他のUIライブラリにない強みになるでしょう。

ケース別の採用判断

受託・短期案件の場合

デザインカンプが用意されていて、見た目を忠実に再現する必要があるならshadcn/uiが効きます。テーマAPIと格闘せず、クラスを直接書き換えられるためです。

一方、納品後の保守契約がない案件では、アップデート運用の負債が顧客側に残ります。引き継ぎ資料に「このUIは自動更新されない」旨を明記しておくのが誠実な進め方です。

自社プロダクトを長期運用する場合

数年スパンで運用するなら、差分取り込みの担当と頻度を決められるかが判断軸になります。決められるならコピー型の自由度は大きな資産になります。決められないなら、インストール型のほうが結果的に安全です。

既存のUIライブラリから乗り換える場合

全面的な置き換えは負荷が高くなりがちです。新規画面からshadcn/uiで作り、既存画面は触らない、という並走から始めるほうが現実的でしょう。両者が混在する期間のデザイン差をどう扱うかだけ、先に合意しておいてください。

アクセシビリティ要件がある場合

ヘッドレス基盤がWAI-ARIAに沿った実装を提供するため、出発点としては有利です。ただしコピー後に手を入れた箇所は自己責任になります。公共系など要件が厳しい案件では、改変後の検証工程を見積もりに入れてください。要件の全体像はWebアクセシビリティ案件｜WCAG対応の単価相場・必要スキル・探し方で整理しています。

よくある失敗と導入前チェックリスト

失敗1：CIが知らないうちに基盤を切り替える

初期化を非対話で回しているCIは、既定変更の影響をそのまま受けます。Radix前提のままにしたいなら -b radix を明示してください。

失敗2：アップデート運用を決めずに走り出す

最も多いつまずきです。半年後に「このダイアログの挙動、上流では直っていた」と気づく展開になります。導入時点で確認頻度を決めておきましょう。

失敗3：ui配下を全員が自由に編集する

共通基盤のファイルに案件固有の調整が混ざると、差分取り込みが一気に難しくなります。ui配下は原則そのまま、調整はラップ層で、という線引きが有効です。

失敗4：パスエイリアスとTailwindの設定漏れ

importが解決しない、クラスが効かない、という初期トラブルの大半はここです。公式のインストールガイドの前提条件を一行ずつ確認するのが近道になります。

失敗5：改変でアクセシビリティを壊す

フォーカス制御やARIA属性を「不要そうに見えるコード」として削ってしまう事故があります。挙動に関わる部分は、意味を確認してから触ってください。

導入前チェックリスト

フリーランスエンジニアから見たshadcn/ui

結論として、少なくとも国内の公開案件を見る限りでは、shadcn/ui単体を主軸にした募集はまだ多くありません。ReactやNext.js案件の要件欄に、使用技術の一つとして含まれる形が中心です。したがって「shadcn/uiで案件を探す」より、「React・Next.js案件で選択肢として提案できる」状態を作るほうが実利があります。

評価されやすいのは、ツールを使えること自体ではなく、選定理由を説明できることです。コピー型の利点とアップデート運用のコストを両方述べたうえで、そのプロジェクトにどちらが合うかを判断できる人は、技術選定を任せられる側に回れます。

学習コストは、Tailwind CSSとReactの経験があれば高くありません。公式ドキュメントを見ながら小さな管理画面を一つ組んでみる程度で、面談で話せる水準には届きます。TypeScriptとは？JavaScriptとの違いや年収、将来性について解説で扱う型の基礎があると、コンポーネントの改変がさらに楽になります。

単価のレンジそのものは、shadcn/uiではなく土台となるReact・フロントエンド領域の条件で決まります。実際の水準はReactフリーランス単価相場｜案件動向・スキル別レンジ・獲得の実務やフロントエンドエンジニアのフリーランス単価相場｜経験別・技術別レンジと動向で整理しています。自分の経験でどのくらいを狙えるか知りたい方は、無料のフリーランスエンジニア単価診断で市場単価の目安を確認できます。単価を体系的に上げる考え方はフリーランスエンジニアの単価相場と単価の上げ方にまとめました。

実際の募集条件を見てみたい場合は、フリコンの案件一覧から現在の要件を確認できます。

まとめ

shadcn/uiは、UIコンポーネントのソースを自分のリポジトリへ取り込み、以後は自分で面倒を見る方式のツールです。自由度と引き換えに、アップデート運用の責任を引き受ける構造になっています。

• ライブラリではなく「コードを配る仕組み」。追加した瞬間からあなたのコードになる

• 2026年7月にBase UIが既定化。Radixは非推奨ではなく、既存プロジェクトの移行も不要

• CIで非対話実行している場合のみ、-b radix の明示が必要になる

• 導入自体は15〜30分程度。本番は追加後のカスタマイズとアップデート運用

• Tailwind CSSの上位レイヤーであり、Storybookとは役割が重ならない併用対象

• レジストリとMCPサーバーにより、社内部品の共有とAIコーディング連携まで射程に入る

次のステップとしては、小さめの管理画面を一つ、実際に組んでみるのが確実です。そのうえで「このプロジェクトは差分取り込みを回せるか」を自分で判断できれば、採用の可否はおのずと決まります。

参照した一次情報は次のとおりです。

• shadcn/ui 公式ドキュメント

• July 2026 - Base UI as the Default（公式チェンジログ）

• shadcn/ui インストールガイド（Next.js）

• shadcn MCP Server

• shadcn-ui/ui GitHubリポジトリ