shadcn/uiとは？読み方・導入手順とBase UI既定化の変更点をReact開発者向けに解説

shadcn/uiは「シャドシーエヌ・ユーアイ」と読みます。React向けのUI部品をnpmパッケージとして入れるのではなく、ソースコードごと自分のプロジェクトにコピーして使うという、従来とは前提の異なるツールです。そして2026年7月、shadcn/uiは中核部品の既定を長年のRadix UIからBase UIへ切り替えました。日本語の解説記事の大半はこの変更前に書かれているため、いま読んでいる手順が現行のCLIと食い違うことがあります。本記事では読み方と仕組みの整理から、既定ベース交代の実害の有無、npx shadcn@latest init からの導入手順、Dialog・Command・Toastの実装例、そして2025年8月に加わったレジストリとMCPサーバーまでを、公式ドキュメントの現行記述に基づいて解説します。

まとめ

細かい解説の前に、要点を先に示します。

• 読み方：「シャドシーエヌ・ユーアイ」。shadcn は作者のハンドルネームに由来します。
• 正体：コンポーネントライブラリではありません。公式が明言しており、コードを所有（Open Code）して自由に書き換えられる点が本質です。
• 2026年7月の変更：既定のベースがRadix UIからBase UIへ交代。ただしRadixは非推奨化されておらず、既存プロジェクトの移行も不要です。
• 導入：npm install shadcn/ui は誤り。npx shadcn@latest init → npx shadcn@latest add button の順にCLIで進めます（旧パッケージ shadcn-ui は0.9.5で更新停止。エラーは出ないまま旧CLIが動くので注意）。
• レジストリとMCP：2025年8月のCLI 3.0以降、社内部品を名前空間付きレジストリで配り、MCPサーバー経由でAIエージェントに直接追加させられます。
• 注意点：コードを所有する裏返しとして、上流の修正が自動では降ってきません。長期運用ではこの更新コストを織り込む必要があります。

以下、読み方と仕組みから順に掘り下げます。

shadcn/uiとは？「コードを所有する」という考え方

読み方は「シャドシーエヌ・ユーアイ」

shadcn/uiは「シャドシーエヌ・ユーアイ」と読みます。「シャドシーエヌ」「しゃどしーえぬ」と検索されることが多く、日本語圏では読み方そのものが最初のつまずきになっています。shadcn は作者のハンドルネームで、プロジェクト名にそのまま採用されたものです。単語として意味があるわけではないため、綴りから「シャドクン」「シャドウシーエヌ」と読まれることもありますが、日本語圏では一文字ずつ読む「シャドシーエヌ・ユーアイ」が定着しています。

中身はReact製のUIコンポーネント集で、ボタン・フォーム・モーダル・テーブルといった画面部品を実装済みの形で提供します。

「コンポーネントライブラリではない」の意味と配布方式の違い

shadcn/uiを理解するうえで最も重要なのが、従来型のコンポーネントライブラリと配布の仕組みが根本的に違うという点です。MUIやChakra UIのような一般的なライブラリは、npmでパッケージを入れるとコードは node_modules の中に置かれます。利用者はそれを呼び出すだけで、内部の実装に手を入れるのは簡単ではありません。

これに対してshadcn/uiは、CLIを実行するとコンポーネントの実コードがプロジェクト内（components/ui 配下）にコピーされます。生成されたコードはすべて自分の所有物として書き換えられます。公式ドキュメントは「これはコンポーネントライブラリではない」と明言しており、公式リポジトリの説明文も「Open Source. Open Code.」を掲げています。依存パッケージのバージョンに振り回されず、必要な部品だけを取り込めるのが利点です。

この「振る舞いは既製の部品に任せ、見た目は自分で持つ」という発想はshadcn/ui固有のものではなく、Headless UIとは？React／Vueでの使い方・Tailwind連携・主要ライブラリ比較で整理したヘッドレスUIの系譜に属します。shadcn/uiはそこへ「コードごと配る」という配布方式を足したものだと捉えると位置づけが掴めます。

従来のUIライブラリとの違い（早見表）

スタイル基盤のTailwind CSSは2025年2月にv4対応が入っています。v4での書き方の変化はTailwind CSS v4の主な変更点と新機能の概要にまとめており、tailwind.config.js を持たない構成が既定になった点はshadcn/uiの初期化設定にも直結します。

既定ベースの交代：Radix UIからBase UIへ（2026年7月）

2026年7月、公式ブログは「Starting today, Base UI is the default component library in shadcn/ui.」と告知し、新規プロジェクトの既定ベースをBase UIに切り替えました。shadcn/uiはリポジトリが公開された2023年1月以来Radix UIを土台にしてきたので、これは中核部品の交代にあたります。Base UIは公式サイトが「From the creators of Radix, Material UI, and Floating UI」と説明するとおり、Radix・Material UI・Floating UIの開発者らが立ち上げたアンスタイルドUIライブラリです（Radixの後継を名乗るものではありません）。shadcn/ui側の説明では、新規作成ツールでBase UIとRadixの選択比が2対1に開いていたことが交代の背景として挙げられています。

2025年以前に書かれた解説記事が「shadcn/uiはRadix UIとTailwind CSSでできている」と説明しているのは、この時点までは正確でした。いま新規に init を実行すると、断りがなければBase UI版のコードが降りてきます。

既存プロジェクトは移行不要、Radixも継続提供

既定が変わったと聞くと移行作業を身構えますが、公式は「Radix is not being deprecated」「You do not need to migrate」と明示しています。今後のアップデートと新規コンポーネントは、Base UI版とRadix版の両方に提供される方針です（Base UIにしか存在しない部品を除く）。稼働中のRadix版プロジェクトを慌てて書き換える必要はありません。

Radixのまま新規に始めたい場合は、-b（--base）で明示します。指定できる値は base（Base UI）・radix・aria の3つで、省略すると対話で選択を求められます。

# 既定（Base UI）で初期化
npx shadcn@latest init

# Radixを指定して初期化
npx shadcn@latest init -b radix

なお移行が必要になった場合も、公式が案内するのは一括変換のコードモッドではなく、AIスキルにコンポーネント単位で書き換えさせる方式です。カスタマイズを潰さず、部品ごとにコミットを分けられるという理由づけがなされています。

Base UI・Radix・React Ariaの選び分け

2026年7月にはAdobeのReact Ariaも第一級のベースとして加わり、選択肢は3系統になりました。判断材料は次のとおりです。

ここは「どれを選んでも同じ」ではありません。コンポーネント名とimportパスは3系統で共通ですが、ボタンなどの自前要素をトリガーへ合成するAPIが異なります。Base UIとReact Ariaは render prop、Radixは asChild を使うため、ベースを乗り換える際はここが最大の書き換え点になります。加えてToastのようにBase UIにしか無い部品もあります（後述）。それぞれの素性はBase UI（React）とは？特徴・Radix UI／MUIとの違い・使い方をわかりやすく解説とRadix UI Primitivesとは？特徴・導入・Themesとの違いを解説で個別に整理しています。ちなみにRadix側も2026年2月に個別パッケージ群が単一の radix-ui パッケージへ統合されており、旧構成からの移行には npx shadcn@latest migrate radix が用意されています。

導入手順（CLIの初期化からimportまで）

ここが古い解説で最も誤りの多い部分です。shadcn/uiはnpmパッケージとしてインストールしません。CLIで初期化し、必要な部品を個別に追加します。

① initでプロジェクトを初期化する

まずReactプロジェクトを用意し、shadcn/uiを初期化します。CLIのパッケージ名は shadcn-ui から shadcn に変更済みです。ここで厄介なのは、古い記事にある npx shadcn-ui@latest ... がエラーにならない点です。shadcn-ui パッケージはnpm上に残っており（最新0.9.5・2025年2月公開）、npxはそれを解決して旧CLIを起動してしまいます。Tailwind CSS v4や現行のレジストリ仕様に対応しないため、初期化が通っても後から辻褄が合わなくなります。パッケージ名は必ず shadcn を使ってください。CLI本体はnpmで活発に更新されており、2026年7月27日時点の最新は4.16.0です（初版1.0.0は2024年7月）。バージョンを固定する理由がなければ @latest で問題ありません。

# 1. Reactプロジェクト（Next.js例）を作成
npx create-next-app@latest my-app
cd my-app

# 2. shadcn/ui を初期化（※ shadcn-ui ではなく shadcn）
npx shadcn@latest init

# pnpm / bun を使う場合
# pnpm dlx shadcn@latest init
# bunx --bun shadcn@latest init

init はベース（Base UI／Radix UI／React Aria）・スタイル・ベースカラー・CSS変数の使用可否などを対話形式で確認し、依存の追加、cn ユーティリティの作成、components.json の生成までを行います。設定は後から components.json で変更できます。スタイルは new-york が現行の標準で、旧 default スタイルは非推奨になりました。対応フレームワークとして公式が導入手順を用意しているのは、Next.js・Vite・TanStack Start・Laravel・React Router・Astro、およびReact単体の手動セットアップです。

② addでコンポーネントを追加する

初期化後は、使う部品だけを add で追加します。コードは components/ui 配下に置かれます。

# 単体で追加
npx shadcn@latest add button

# まとめて追加
npx shadcn@latest add button dialog skeleton table

# 追加前に中身を確認する
npx shadcn@latest view @shadcn/button

上書き前に差分を見たいときは add --diff、書き込まずに動作だけ試すなら --dry-run、上書きを強制するなら --overwrite を付けます。view は追加せずに中身を読むためのコマンドで、後述する社外・社内レジストリの部品を検討するときに効きます。

③ 自プロジェクトからimportして使う

追加した部品は、node_modulesではなく自分のプロジェクトから読み込みます。importパスは @/components/ui/... です（旧版の記事にある from 'shadcn/ui' は誤りです）。

import { Button } from "@/components/ui/button"

export default function Example() {
  return <Button variant="outline">Click!</Button>
}

これはコピーされた実ファイルなので、button.tsx を開いてスタイルも挙動も直接編集できます。これが「コードを所有する」感覚です。

Dialog・Skeleton・Command・Tabs・Field・Toastの実装例

公式ドキュメントの一覧に並ぶ部品は2026年7月時点で63種類です。検索で需要が大きいものから順に、追加コマンドと最小の実装例を示します。コード例は既定のBase UI構成に合わせています。

モーダル・ポップアップ（Dialog）

「shadcn modal」「shadcn popup」で求められるのがDialogです。削除確認や詳細表示など、画面遷移せずに操作を促す場面で使います。背景のオーバーレイ、フォーカストラップ、Escキーでの閉じる動作はベース側（Base UIまたはRadix）が担保するため、自前実装で漏れやすい部分を書かずに済みます。

npx shadcn@latest add dialog

import {
  Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle,
} from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"

export function ConfirmDialog() {
  return (
    <Dialog>
      <DialogTrigger render={<Button variant="outline" />}>開く</DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>確認</DialogTitle>
        </DialogHeader>
        <p>本当に削除しますか？</p>
      </DialogContent>
    </Dialog>
  )
}

ここが古い記事と最も食い違う箇所です。トリガーに自前のボタンを使う書き方が、既定のBase UIでは render prop、Radixでは asChild と別物になっています。Radix構成（-b radix）では次のように書きます。

<DialogTrigger asChild>
  <Button variant="outline">開く</Button>
</DialogTrigger>

逆に既定のBase UI構成で asChild を書いても意図した合成は起きず、button が入れ子になった不正なHTMLになります。2025年以前のサンプルを写す際は、この1点だけ必ず読み替えてください。

画面端から出るパネル型が欲しい場合はSheet、破壊的操作の確認に特化した型が欲しい場合はAlert Dialogが別部品として用意されています。用途で使い分けたほうが、キーボード操作の期待挙動と一致します。

スケルトン（Skeleton）

読み込み中のプレースホルダーを出す部品です。データ取得が終わるまで仮のレイアウトを見せることで、体感待ち時間を抑えます。形とサイズはTailwindのクラスで指定します。

npx shadcn@latest add skeleton

import { Skeleton } from "@/components/ui/skeleton"

export function CardSkeleton() {
  return (
    <div className="flex flex-col gap-2">
      <Skeleton className="h-32 w-full rounded-xl" />
      <Skeleton className="h-4 w-3/4" />
      <Skeleton className="h-4 w-1/2" />
    </div>
  )
}

公式のサンプルは、アバター型（size-10 rounded-full）・カード型（aspect-square w-full）・テキスト行型・テーブル型といった、実際の表示物の形に寄せた指定を示しています。幅を実データの平均文字数に寄せておくと、描画完了時のレイアウトのずれが小さくなります。全幅のバーを並べるだけだと、読み込み後に行が詰まって視線が飛びます。

コマンドパレット（Command）

キーボードから機能を呼び出すパレットUIです。管理画面の機能数が増えたときに、メニュー階層を深くせず到達できる導線として効きます。

npx shadcn@latest add command

import {
  Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem,
} from "@/components/ui/command"

export function ActionPalette() {
  return (
    <Command>
      <CommandInput placeholder="操作を検索..." />
      <CommandList>
        <CommandEmpty>該当なし</CommandEmpty>
        <CommandGroup heading="ユーザー">
          <CommandItem>新規登録</CommandItem>
          <CommandItem>権限を変更</CommandItem>
        </CommandGroup>
      </CommandList>
    </Command>
  )
}

Dialogと組み合わせれば、ショートカットキーで開く一般的なコマンドパレットになります。

タブ（Tabs）

「shadcn tabbar」で求められるタブバー型のUIです。1つの領域でアカウント設定とパスワード変更を切り替える、といった用途に使います。

npx shadcn@latest add tabs

import {
  Tabs, TabsList, TabsTrigger, TabsContent,
} from "@/components/ui/tabs"

export function ProfileTabs() {
  return (
    <Tabs defaultValue="account">
      <TabsList>
        <TabsTrigger value="account">アカウント</TabsTrigger>
        <TabsTrigger value="password">パスワード</TabsTrigger>
      </TabsList>
      <TabsContent value="account">アカウント設定の内容</TabsContent>
      <TabsContent value="password">パスワード変更の内容</TabsContent>
    </Tabs>
  )
}

既定は塗りつぶしの箱型ですが、下線だけの見た目にしたい場合は <TabsList variant="line"> を指定します。管理画面のように情報密度を上げたい画面ではこちらのほうが収まります。

フォーム（Formの廃止とFieldへの再編）

ここは古い記事との差が大きい箇所です。かつて案内されていた add form はコンポーネント一覧から姿を消し、現在はFieldが正となっています。Fieldはラベル・入力コントロール・補助テキストを組み合わせてアクセシブルなフォーム項目を構成する部品で、公式の説明は「Combine labels, controls, and help text to compose accessible form fields and grouped inputs.」です。

npx shadcn@latest add field

状態管理とバリデーションはFieldの外側で選びます。公式のフォームガイドはReact Hook Form・TanStack Form・Formischの3系統に分かれており、Reactの useActionState 対応は準備中とされています。既存資産があるならReact Hook Formが無難で、書き方はReact Hook Formとは？使い方・バリデーション・v7の書き方を実例で解説にまとめています。

トースト（Toast）

2026年7月に追加された新しい部品で、現時点ではBase UI構成にのみ存在します。前述の「Base UIにしか無い部品」の実例がこれで、Radix／React Aria構成では代わりに npx shadcn@latest add sonner でSonnerベースのトーストを使います。toast.add() で短い通知を出し、成功・情報・警告・エラー・ローディングを type で切り替えます。非同期処理には toast.promise() があり、処理の進行に合わせて表示が自動で切り替わるため、保存処理の待ち時間に別途スピナーを組む必要がありません。

npx shadcn@latest add toast

import { toast } from "@/components/ui/toast"

toast.add({
  title: "Event created",
  description: "Sunday, December 3 at 9:00 AM",
})

使用前にルートレイアウトへToasterを設置しておく必要があります。

レジストリとMCPサーバーでAIに組み込む

レジストリ機構そのものは2025年初頭から段階的に整備されてきましたが、名前空間付きレジストリと公式MCPサーバーが揃ったのが2025年8月のCLI 3.0です。ここが、いまのshadcn/uiと他のUIライブラリを最も大きく分ける部分になりました。公式の部品を取ってくるだけの道具ではなく、「コンポーネントを配る側にも回れる仕組み」になりました。

名前空間付きレジストリで社内部品を配る

レジストリは @namespace/name の形式で参照します。components.json に配布元を登録しておけば、公式レジストリと社内レジストリを同じCLIで併用できます。

{
  "registries": {
    "@acme": "https://registry.acme.com/resources/{name}.json",
    "@private": {
      "url": "https://api.company.com/registry/{name}.json",
      "headers": { "Authorization": "Bearer ${REGISTRY_TOKEN}" }
    }
  }
}

# 社内レジストリから追加
npx shadcn@latest add @acme/header

# 何が置いてあるか検索する
npx shadcn@latest search @acme --query "auth"

# 自社のレジストリJSONを生成する
npx shadcn@latest build

認証ヘッダーに環境変数を差し込めるため、社内限定の部品も配布できます。受託開発で複数案件に同じ管理画面の型を横展開する、といった使い方に向きます。UI設計そのものの型については業務システムの画面デザイン｜実装者向けUI設計パターンとライブラリ選定も参考になります。

MCPサーバーでAIエージェントに追加させる

shadcn/uiはMCPサーバーを同梱しており、AIコーディングツールから直接レジストリを検索・追加させられます。設定はクライアントを指定して1コマンドです。

npx shadcn@latest mcp init --client claude

Claude Code（.mcp.json）、Cursor（.cursor/mcp.json）、VS Code（.vscode/mcp.json）、Codex（~/.codex/config.toml）の設定を生成します。接続後は「Find me a login form from the shadcn registry」のような自然文で、レジストリの閲覧・検索・追加まで任せられます。

そもそもコードがプレーンなReactとTailwindで、しかも自プロジェクト内に存在するため、AIが読んで直すのに向いた形をしています。VercelのVercel v0とは何か：最新技術の概要とその背景についてが生成するUIコードもshadcn/uiベースで、生成物をそのまま自分のリポジトリで手直しできる点が実務では効きます。

MUI・Chakra UI・daisyUIとの比較と選定基準

選定の参考に、代表的な選択肢と並べて整理します。

「基盤」欄のEmotionはCSS-in-JSの描画エンジンです。Chakra UIはv3でも描画にEmotionを使っており、v3で外れたのは @emotion/styled とframer-motionです。daisyUIは公式が「a high-level abstraction of Tailwind CSS utility classes」と説明するとおり、btn や card といった意味づけされたコンポーネントクラスをTailwindに足すプラグインです。実装コードを自分の資産として所有する方式ではない点が、shadcn/uiとの本質的な違いになります。

決められたデザインをすぐ使いたいならMUIやChakra UIとは？使い方・インストール・v3の変更点をわかりやすく解説【React】が手軽で、日本語ドキュメントを重視するならYamada UIとは何か？Reactコンポーネントライブラリの概要も候補になります。Tailwind系同士のスタイリング比較はTailwind CSSとEmotionの基本的な特徴と違いについての紹介を参照してください。

shadcn/uiを選ぶべきでない場面

採用判断で見落とされがちなのは、コードを所有することの費用です。上流でバグ修正やアクセシビリティ改善が入っても、コピー済みのファイルには自動で反映されません。更新を取り込むには add --overwrite で上書きし、自分で入れた変更との差分を手で解決する必要があります。部品を10個使えば、10個分の追従判断を自分たちが抱えることになります。

この前提から、次の条件に当てはまるなら他の選択肢のほうが合理的です。

• デザインの作り込みを求めていない：既製の見た目で十分なら、更新が自動で降ってくるパッケージ型のほうが総コストは低くなります。
• Tailwind CSSを採用しない：shadcn/uiのスタイルはTailwind前提です。既存のCSS設計を崩してまで導入する理由はありません。
• UIを継続的に触る担当者がいない：納品して数年放置する案件では、所有したコードが更新されないまま古びます。
• React以外が主戦場：本家はReact向けです。Vueにはコミュニティのshadcn-vueがありますが、本家の更新に完全追従する保証はありません。

逆に、デザインシステムを自社で持ちたい、AIに生成させた画面を人が仕上げる運用を回したい、というチームには現時点で有力な選択肢です。判断軸は「更新を誰が抱えるか」に集約されます。

よくある質問（FAQ）

shadcn/uiはどう読む？「シャドウCN」でいい？

「シャドシーエヌ・ユーアイ」と一文字ずつ読むのが定着した読み方です。shadcn は作者のハンドルネームで、shad + c + n という並びのため、「シャドウCN」「シャドクン」と読まれたり shadow cn と綴り間違えられたりしますが、いずれも通称です。表記は小文字の shadcn/ui が正式です。

npmでインストールできないの？普通のライブラリと何が違う？

shadcn/ui本体を依存パッケージとして入れる使い方は想定されていません。CLIでコードを自分のプロジェクトへコピーする方式です（CLIやベースライブラリなどの依存は内部で追加されます）。コードを所有して自由に編集できる点が、従来型ライブラリとの最大の違いです。

React以外（Vueなど）でも使える？

本家はReact向けです。Vue/Nuxtにはコミュニティ主導の「shadcn-vue」があり、同じ思想を踏襲しています。ただし本家とは別プロジェクトのため、新機能の反映時期はずれます。

React Routerのプロジェクトでも導入できる？

できます。公式の導入手順にReact Router向けが用意されています。かつて案内されていたRemixは、現在React Routerに統合された名称で扱われます。Next.js・Vite・TanStack Start・Laravel・Astroにも個別の手順があります。

CLIのバージョンは指定したほうがいい？

通常は @latest で構いません。CLIは2026年3月にv4系へ上がり、2026年7月27日時点の最新は4.16.0です。CI上で結果を固定したい場合のみ npx [email protected] add button のように明示します。生成されるコンポーネントのコードは自分の資産なので、CLIを上げても既存ファイルが勝手に書き換わることはありません。

既存プロジェクトに後から導入できる？

npx shadcn@latest init は既存プロジェクトの初期化にも対応しており、必要な部品だけ段階的に add していけます。自作コンポーネントとの共存も容易です。

関連記事

• Base UI（React）とは？特徴・Radix UI／MUIとの違い・使い方をわかりやすく解説
• Radix UI Primitivesとは？特徴・導入・Themesとの違いを解説
• Tailwind CSS v4の主な変更点と新機能の概要
• Chakra UIとは？使い方・インストール・v3の変更点をわかりやすく解説【React】
• Vercel v0とは何か：最新技術の概要とその背景について