---
title: "shadcn/uiとは？読み方・導入手順とBase UI既定化の変更点をReact開発者向けに解説"
url: "https://www.issoh.co.jp/tech/details/4092/"
published: 2024-11-08
updated: 2026-09-06
categories: ["React"]
publisher: "株式会社一創"
---

# 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の実装例、Blocks・Charts・Themesという画面単位の資産、レジストリとMCPサーバー、そしてライセンスと費用までを、[公式ドキュメント](https://ui.shadcn.com/docs)の現行記述に基づいて解説します。

## まとめ：shadcnの読み方と導入手順、Base UI既定化の要点

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

- **読み方**：「シャドシーエヌ・ユーアイ」。`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が動くので注意）。
- **部品より大きい単位**：ログイン画面やダッシュボードをまとめて取り込むBlocks、グラフ用のCharts、配色を切り替えるThemesが公式サイトに用意されています。
- **レジストリとMCP**：2025年8月のCLI 3.0以降、社内部品を名前空間付きレジストリで配り、MCPサーバー経由でAIエージェントに直接追加させられます。2026年8月にはプライベートGitHubリポジトリを配布元にできるようになりました。
- **費用**：MITライセンスで無料。Blocks・Charts・Themesを含め、有料プランを契約しないと使えない領域はありません。
- **注意点**：コードを所有する裏返しとして、**上流の修正が自動では降ってきません**。長期運用ではこの更新コストを織り込む必要があります。

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

## shadcn/uiとは？コードを所有するという配布方式の考え方

### 読み方は「シャドシーエヌ・ユーアイ」で作者のハンドルネームが由来

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

中身はReact製のUIコンポーネント集で、ボタン・フォーム・モーダル・テーブルといった画面部品を実装済みの形で提供します。単に `shadcn` とだけ書かれている場合、文脈によってCLIのパッケージ名を指すことも、UI部品群の総称を指すこともあります。npm上のパッケージ名は `shadcn`、プロダクト名としての表記は `shadcn/ui` という使い分けだと捉えておけば読み違えません。

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

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

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

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

### 従来のUIライブラリとの違いを配布形態など6観点で並べた早見表

| 観点     | shadcn/ui    | MUI / Chakra UI |
| ------ | ------------ | --------------- |
| 配布形態   | コードをコピー      | npmパッケージ        |
| コードの所在 | 自プロジェクト内     | node\_modules   |
| コード編集  | 自由（所有）       | 原則そのまま利用        |
| 追加方法   | CLIで個別追加     | 一括インストール        |
| スタイル基盤 | Tailwind CSS | Emotion など      |
| 上流の修正  | 自分で取り込む      | 更新で降ってくる        |

スタイル基盤のTailwind CSSは2025年2月にv4対応が入っています。v4での書き方の変化は[Tailwind CSS v4の主な変更点と新機能の概要](/tech/details/5060/)にまとめており、`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は[公式サイト](https://base-ui.com/)が「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 UI・React Ariaの選び分けと書き換え点

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

| ベース        | 位置づけ         | 向く場面          |
| ---------- | ------------ | ------------- |
| Base UI    | 既定（2026年7月〜） | 新規プロジェクト全般    |
| Radix UI   | 継続サポート       | 既存資産・社内実績あり   |
| React Aria | 2026年7月に追加   | 厳格なアクセシビリティ要件 |

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

## 導入手順：CLIの初期化からコンポーネントのimportまで

ここが古い解説で最も誤りの多い部分です。**shadcn/uiはnpmパッケージとしてインストールしません。**CLIで初期化し、必要な部品を個別に追加します。フレームワーク別の手順は[公式のインストールガイド](https://ui.shadcn.com/docs/installation)にまとまっています。

### ① npx shadcn@latest 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レジストリ](https://www.npmjs.com/package/shadcn)で活発に更新されており、2026年9月6日時点の最新は4.21.0系（2026年9月4日公開）です（初版1.0.0は2024年7月、v4系へ上がったのは2026年3月）。バージョンを固定する理由がなければ `@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` 配下に置かれます。サブコマンドの一覧と引数は[CLIのリファレンス](https://ui.shadcn.com/docs/cli)が正になります。

```
# 単体で追加
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` を開いてスタイルも挙動も直接編集できます。これが「コードを所有する」感覚です。

### cnユーティリティのパッケージ化と移行コマンドの実行手順（2026年9月）

2026年9月のアップデートで、クラス名を結合する `cn` ユーティリティが専用パッケージに切り出されました。従来は `init` が `lib/utils.ts` に `twMerge(clsx(...))` の実装を書き出し、各コンポーネントがそこからimportする形でした。現行のコンポーネントは `cn` パッケージから直接読み込みます。[公式チェンジログ](https://ui.shadcn.com/docs/changelog)は移行用のコマンドを案内しており、既存プロジェクトも1コマンドで追従できます。

```
# cn をパッケージ参照へ移行する
npx shadcn@latest migrate cn
```

```
// 移行後の lib/utils.ts は再エクスポートだけになる
export { cn } from "cn"
```

すぐに移行しなくても既存の `lib/utils.ts` は動きます。ただし新しく `add` した部品が `cn` パッケージ側をimportしてくるため、混在させると同じ処理の実体が2つになります。触るタイミングで揃えておくほうが後の混乱は少ないでしょう。

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

[公式ドキュメント](https://ui.shadcn.com/docs)の一覧に並ぶ部品は2026年9月時点で60種類超です。検索で需要が大きいものから順に、追加コマンドと最小の実装例を示します。**コード例は既定の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と組み合わせれば、ショートカットキーで開く一般的なコマンドパレットになります。

### 1つの領域を切り替える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のドキュメント](https://ui.shadcn.com/docs/components/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の書き方を実例で解説](/tech/details/2898/)にまとめています。

### 通知を出すToastとRadix構成でのSonnerによる代替手段

2026年7月に追加された新しい部品で、**現時点ではBase UI構成のみの提供です**。前述の「Base UIにしか無い部品」の実例がこれで、Radix／React Aria構成では代わりに `npx shadcn@latest add sonner` でSonnerベースのトーストを使います。[Toastのドキュメント](https://ui.shadcn.com/docs/components/toast)にあるとおり `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を設置しておく必要があります。

### 2026年8月に加わったQuestionnaireの用途と追加コマンド

2026年8月には[Questionnaire](https://ui.shadcn.com/docs/components/questionnaire)という部品が加わりました。複数段階の質問フローを組むためのもので、単一選択・複数選択・自由記述・スキップ・キーボード操作・サーバーレンダリングに対応します。オンボーディングやアンケートのほか、AIエージェントがユーザーへ確認を返すプロンプト画面という用途が公式に挙げられている点が、この部品の出自を表しています。

```
npx shadcn@latest add questionnaire
```

従来なら自前でステップ管理と状態遷移を書いていた領域です。数問の入力を順に取るだけなら、既製の部品を持ってきて文言を差し替えるほうが早く済みます。

## Blocks・Charts・Themesで画面単位から組み立てる方法

shadcn/uiで見落とされやすいのが、部品より大きい単位の資産です。ボタンやダイアログを1つずつ積み上げなくても、画面のかたまりや配色をまとめて持ってこられます。

### Blocksで画面単位のコードを取り込み、Chartsでグラフを描く

[Blocks](https://ui.shadcn.com/blocks)は、ログイン画面・サイドバー付きダッシュボード・カレンダーといった**画面のかたまり**を、そのままコードとして取り込める単位です。部品と同じく `add` で追加でき、落ちてくるのは自分のプロジェクト内の実ファイルなので、レイアウトも文言も自由に潰せます。管理画面の初期骨格を作る場面では、ここから始めるほうが手数が減ります。

グラフは[Charts](https://ui.shadcn.com/charts)にまとまっています。棒・折れ線・面・円といった型ごとにコードが用意されており、Chartコンポーネントを `add` して差し替える流れです。

```
# ダッシュボードのブロックとグラフを取り込む
npx shadcn@latest add dashboard-01
npx shadcn@latest add chart
```

ブロック名は公式サイトの各ブロックのページに表示されるものを使います。取り込んだあとは自分のコードなので、社内の命名規則やAPI呼び出しに合わせて書き換えて構いません。

### Themesとベースカラーで配色をまとめて切り替える設定方法

[Themes](https://ui.shadcn.com/themes)は、ベースカラーと角丸の値を選んでCSS変数一式を生成する仕組みです。`init` のときに選ぶベースカラー（`neutral`・`slate`・`stone` など）と同じ層を、後からまとめて差し替えられます。生成されたCSS変数をグローバルCSSへ貼れば、個々のコンポーネントに手を入れずに配色が変わります。

ここが「コードを所有する」方式の効きどころです。ライブラリのテーマAPIの制約に合わせて設計を曲げる必要がなく、変数の値も命名も自社のデザイントークンへ寄せられます。トークンの整理そのものについては[デザインシステムとは？構成要素・作り方とデザインガイドラインとの違いを解説](/column/details/1372/)で構成要素を整理しています。

## レジストリとMCPサーバーでAIエージェントに部品を組み込む

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

### 名前空間付きレジストリで社内共通のUI部品を配布する設定手順

レジストリの参照形式は `@namespace/name` です。`components.json` に配布元を登録しておけば、公式レジストリと社内レジストリを同じCLIで併用できます。仕様の詳細は[レジストリのドキュメント](https://ui.shadcn.com/docs/registry)にあります。

```
{
  "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
```

認証ヘッダーに環境変数を差し込めるため、社内限定の部品も配布できます。受託開発で複数案件に同じ管理画面の型を横展開する、といった使い方に向きます。2026年7月には検索をサーバー側で処理する仕組みが入り、部品数の多いレジストリでもカタログ全体を落とさずに絞り込めるようになりました。UI設計そのものの型については[業務システムの画面デザイン｜実装者向けUI設計パターンとライブラリ選定](/tech/details/15325/)も参考になります。

### プライベートGitHubリポジトリを配布元にする認証の設定手順

2026年8月の更新で、レジストリJSONをホスティングしなくても**非公開のGitHubリポジトリをそのまま配布元にできる**ようになりました。社内デザインシステムを外に出さずに配る場合、これが最も手数の少ない方法です。手元では GitHub CLI の認証をそのまま使い、CIではトークンを環境変数で渡します。設定は[GitHubレジストリのドキュメント](https://ui.shadcn.com/docs/registry/github)に記載があります。

```
# 手元では gh の認証をそのまま使う
gh auth login
npx shadcn@latest add acme/internal-toolkit/auth-kit

# CIではトークンを環境変数で渡す
GH_TOKEN=github_pat_xxx npx shadcn@latest add acme/internal-toolkit/auth-kit

# 置いてある部品を確認する
npx shadcn@latest list acme/internal-toolkit
```

配布側で用意するのはリポジトリと部品のファイルだけで、レジストリ用のサーバーは要りません。少人数のチームが社内共通の入力欄やレイアウトを配る程度なら、この形で足ります。

### MCPサーバー経由でAIエージェントに部品を追加させる設定手順

shadcn/uiは[MCPサーバー](https://ui.shadcn.com/docs/mcp)を同梱しており、AIコーディングツールから直接レジストリを検索・追加させられます。設定はクライアントを指定して1コマンドです。MCPという規格そのものの仕組みは[MCP（Model Context Protocol）とは？AIと外部ツールをつなぐ標準規格の仕組みをわかりやすく解説](/tech/details/5736/)で整理しています。

```
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の[v0（Vercel）とは？料金・使い方・APIを2026年最新解説](/tech/details/3416/)が生成するUIコードもshadcn/uiベースで、生成物をそのまま自分のリポジトリで手直しできる点が実務では効きます。

## ライセンスと費用：MITライセンスで無料、商用利用と再配布の条件

「shadcn 料金」で調べる人が気にしているのは、有料プランの有無と商用利用の可否でしょう。結論から言えば**費用はかかりません**。[リポジトリのLICENSE](https://github.com/shadcn-ui/ui/blob/main/LICENSE.md)はMITライセンスで、npm上の `shadcn` パッケージのライセンス表記もMITです。Blocks・Charts・Themesを含め、機能を絞った無料枠と有料枠に分かれている構造ではありません。

MITなので商用利用・改変・再配布が認められ、義務は著作権表示とライセンス文の同梱に限られます。実務で問題になりやすいのは次の2点です。

- **コピーしたコードは自社のソースになる**：`components/ui` に落ちたファイルは自分のリポジトリで管理する対象です。社内の規約でOSS由来コードの記録を求めているなら、取り込み時点のバージョンを控えておきます。
- **依存パッケージのライセンスは別扱い**：Base UIやRadix、Tailwind CSSなどはそれぞれのライセンスに従います。まとめてshadcn/uiのライセンスで覆われるわけではありません。

費用が発生するとすれば、ライセンス料ではなく人の工数です。所有したコードを誰が保守するのか、という一点に集約されます。

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

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

| 項目     | shadcn/ui  | MUI     | Chakra UI | daisyUI  |
| ------ | ---------- | ------- | --------- | -------- |
| 形態     | コピー方式      | パッケージ   | パッケージ     | CSSプラグイン |
| 基盤     | Base UI 既定 | Emotion | Emotion   | Tailwind |
| コード所有  | ◎          | △       | △         | △        |
| カスタマイズ | ◎          | ○       | ○         | ○        |
| 導入の手軽さ | ○          | ◎       | ◎         | ◎        |

「基盤」欄の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に足すプラグインです（詳細は[daisyUIとは？Tailwind CSSコンポーネントの使い方とv5の設定変更【2026年版】](/tech/details/2987/)）。実装コードを自分の資産として所有する方式ではない点が、shadcn/uiとの本質的な違いになります。

決められたデザインをすぐ使いたいならMUIや[Chakra UIとは？使い方・インストール・v3の変更点をわかりやすく解説【React】](/tech/details/3059/)が手軽で、日本語ドキュメントを重視するなら[Yamada UIとは？@yamada-ui/react v2の導入とテーマ設計・v1移行](/tech/details/2358/)も候補になります。Tailwind系同士のスタイリング比較は[Tailwind CSSとEmotionの違い｜v4での使い分けと共存](/tech/details/4494/)を参照してください。

## shadcn/uiを選ぶべきでない場面と代替候補を選ぶ判断軸

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

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

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

逆に、デザインシステムを自社で持ちたい、AIに生成させた画面を人が仕上げる運用を回したい、というチームには現時点で有力な選択肢でしょう。判断軸は「更新を誰が抱えるか」に集約できるでしょう。自社に継続して触る体制が組めないまま所有方式へ寄せると、数年後に手が付けられないコードが残ります。設計と実装の担い手を外部に置く前提で検討するなら、弊社の[UI/UXデザイン](https://www.issoh.co.jp/service/web/ui-ux/)のように、画面設計とコンポーネント整備をまとめて引き受ける体制と組み合わせる進め方もあります。

## よくある質問

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

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

### shadcnとshadcn/uiは何が違う？どちらの表記が正しい？

プロダクトの正式表記は `shadcn/ui` で、`shadcn` はnpm上のCLIパッケージ名かつ作者のハンドルネームです。日常会話で「shadcnを入れる」と言えばほぼ `shadcn/ui` の部品を指しますが、コマンドに書くパッケージ名としては `shadcn` が正になります。旧CLIの `shadcn-ui` とは別物なので、そこだけ取り違えないようにしてください。

### shadcnは無料で使える？商用利用やライセンス表記はどうする？

MITライセンスで無料です。有料プランはありません。商用のプロダクトへの組み込みや、改変後の社内配布も可能です。義務は著作権表示とライセンス文の同梱で、コピーしたコードを自社リポジトリで保守する体制のほうが実質的な費用になります。Base UIやTailwind CSSといった依存はそれぞれのライセンスに従う点に注意してください。

### 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年9月6日時点の最新は4.21.0系（2026年9月4日公開）です。CI上で結果を固定したい場合のみ `npx shadcn@4.21.0 add button` のように明示します。生成されるコンポーネントのコードは自分の資産なので、CLIを上げても既存ファイルが勝手に書き換わることはありません。

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

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

## 関連記事

- [Base UI（React）とは？特徴・Radix UI／MUIとの違い・使い方をわかりやすく解説](/tech/details/10350/)
- [Radix UI Primitivesとは？特徴・導入・Themesとの違いを解説](/tech/details/7856/)
- [React Ariaとは？Adobe製アクセシビリティライブラリの構成・使い方・スタイリングを解説](/tech/details/2392/)
- [Tailwind CSS v4の主な変更点と新機能の概要](/tech/details/5060/)
- [Chakra UIとは？使い方・インストール・v3の変更点をわかりやすく解説【React】](/tech/details/3059/)
- [daisyUIとは？Tailwind CSSコンポーネントの使い方とv5の設定変更【2026年版】](/tech/details/2987/)
- [v0（Vercel）とは？料金・使い方・APIを2026年最新解説](/tech/details/3416/)

---

出典: [shadcn/uiとは？読み方・導入手順とBase UI既定化の変更点をReact開発者向けに解説](<https://www.issoh.co.jp/tech/details/4092/>)（株式会社一創）