shadcn/uiとは？使い方・導入手順とコンポーネント例をReact開発者向けに解説

shadcn/ui（シャドシーエヌ・ユーアイ）は、React向けのUIコンポーネントを「npmパッケージとしてインストールする」のではなく、コンポーネントのソースコードを自分のプロジェクトに直接コピーして使うという、従来とは発想の異なるUIツールです。2023年のJavaScript Rising Stars（bestofjs.orgが集計するJSトレンドランキング）で1位を獲得して以来、急速に定番化しました。本記事では「そもそも何が違うのか」という核心から、正しい導入手順（npx shadcn@latest init）、Button・モーダル・スケルトンなど主要コンポーネントの使い方、他ライブラリとの比較、AIコーディングとの相性までを、最新情報に基づいて整理します。

まとめ

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

• 正体：shadcn/uiは「コンポーネントライブラリではない」。公式自身がそう明言しており、コードを所有（Open Code）して自由に編集できる点が最大の特徴です。
• 基盤：アクセシビリティに強いRadix UIのプリミティブと、Tailwind CSSのスタイリングを組み合わせて作られています。
• 導入：npm install shadcn/ui は誤り。正しくはCLIで npx shadcn@latest init → npx shadcn@latest add button のように必要なものだけ追加します（旧コマンド shadcn-ui は廃止）。
• 使い方：追加したコンポーネントは @/components/ui/... から読み込みます（node_modulesには入りません）。
• 向いている人：デザインを細かく作り込みたい、依存を増やしたくない、AIツール（v0など）と組み合わせて高速に開発したいReact/Next.js開発者。

以下、それぞれを順に掘り下げます。まずは「何が違うのか」からです。

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

読み方と概要

shadcn/uiは一般に「シャドシーエヌ・ユーアイ」と読みます。「shadcn」は作者（開発者）のハンドルネームに由来し、そのプロジェクト名がそのまま定着したものです。中身としては、React製のUIコンポーネント集で、ボタン・フォーム・モーダル・テーブルといった画面パーツをすぐに使える形で提供します。土台にはアクセシビリティ設計に定評のあるRadix UIと、ユーティリティファーストのTailwind CSSが使われています。

「コンポーネントライブラリではない」とはどういう意味か

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

これに対してshadcn/uiは、CLIを実行するとコンポーネントの実コードがあなたのプロジェクト内（components/ui 配下）にコピーされます。つまり、生成されたコードはすべて自分の所有物として自由に書き換えられます。公式ドキュメントでも「これはコンポーネントライブラリではない（コピー＆ペーストして使う再利用可能なコンポーネント集である）」と明言されており、近年はこの思想を「Open Code」と表現しています。依存パッケージのバージョンに振り回されず、必要なコンポーネントだけを取り込めるのが利点です。

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

なお、土台のTailwind CSSについてはTailwind CSS v4の主な変更点と新機能の概要もあわせて参照すると、shadcn/uiのスタイリングの理解が深まります。

shadcn/uiの主な特徴

Radix UIとTailwind CSSによる設計

shadcn/uiのコンポーネントは、振る舞い（開閉・フォーカス管理・キーボード操作など）をRadix UIのプリミティブに任せ、見た目をTailwind CSSのクラスで表現します。バリエーション（サイズ・色など）の管理にはCVA（Class Variance Authority）が使われており、スタイルの差し替えが整理された形で行えます。ロジックとスタイルが分離されているため、デザインだけを大きく変えても挙動は保たれます。

カスタマイズ性とテーマ（CSS変数）

色やフォント、角丸などはCSS変数で定義され、components.json の設定でCSS変数ベースかTailwindユーティリティベースかを選べます。ブランドカラーへの統一や、ダークモード対応もCSS変数の切り替えで実現しやすく、プロジェクト全体で一貫したデザインを保てます。Tailwind v4にも対応しています。

アクセシビリティ

土台のRadix UIがWAI-ARIAやキーボード操作、フォーカストラップなどを担保しているため、モーダルやドロップダウンといった複雑な要素でも、最初からアクセシブルな状態で使い始められます。自前で実装すると漏れやすい部分を肩代わりしてくれるのは大きな利点です。

対応フレームワーク

shadcn/uiはReactベースですが、CLIは複数のフレームワーク向けテンプレートを用意しています。現在サポートされている主なものは、Next.js / Vite / TanStack Start / React Router / Astro、加えてLaravel向けの導線です。なお、かつて案内されていたRemixは、現在はReact Routerに統合された名称で扱われます。Vue/Nuxtで使いたい場合は、コミュニティ主導の派生プロジェクト「shadcn-vue」が選択肢になります。

shadcn/uiの導入方法（インストール手順）

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

① プロジェクトの用意とCLIの注意点

まずReactプロジェクト（ここではNext.js）を用意し、shadcn/uiを初期化します。CLIのパッケージ名は shadcn-ui から shadcn に変更されており、古い記事にある npx shadcn-ui@latest ... は「command not found」になります。必ず shadcn を使ってください。

# 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 を実行すると、スタイルやベースカラー、CSS変数を使うかなどを対話形式で聞かれ、依存関係の追加・cn ユーティリティの作成・components.json の生成が行われます。設定は後から components.json で変更できます。

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

初期化後は、使いたいコンポーネントだけを add で追加します。コードは components/ui 配下に置かれます。

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

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

③ コンポーネントを使う

追加したコンポーネントは、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 を直接開いてスタイルや挙動を編集できます。これがshadcn/uiの「コードを所有する」感覚です。

主要コンポーネントと使用例

shadcn/uiには数十種類のコンポーネントが用意されています。追加コマンドの一例は次のとおりです。

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

「shadcn modal」「shadcn popup」で求められるのが、このDialogコンポーネントです。削除確認や詳細表示など、画面遷移せずに操作を促す場面で使います。背景のオーバーレイ、フォーカス管理、Escキーでの閉じる動作などはRadix UI側で担保されています。

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

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

スケルトン（Skeleton）

「shadcn ui skeleton」で求められるのが、読み込み中のプレースホルダーを表示するSkeletonです。データ取得が完了するまで仮のレイアウトを見せることで、待ち時間の体感を減らし離脱を防ぎます。Tailwindのクラスで形やサイズを自由に調整できます。

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>
  )
}

フォーム・テーブル・タブ

フォームは add form input で追加でき、React Hook FormとZodによる型安全なバリデーションを前提とした構成になっています。いずれのコンポーネントも、追加後は自分のコード内でカラムや項目を自由に拡張できます。

テーブル（add table）は、見出し・行・セルを組み合わせて一覧表示に使います。

import {
  Table, TableHeader, TableBody, TableRow, TableHead, TableCell,
} from "@/components/ui/table"

export function UserTable() {
  return (
    <Table>
      <TableHeader>
        <TableRow>
          <TableHead>名前</TableHead>
          <TableHead>権限</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        <TableRow>
          <TableCell>佐藤</TableCell>
          <TableCell>管理者</TableCell>
        </TableRow>
      </TableBody>
    </Table>
  )
}

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

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>
  )
}

他のUIライブラリとの比較

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

※基盤の「Emotion」はCSS-in-JSの描画エンジンを指します。Chakra UIはv3でも描画にEmotionを使用しており、v3で外れたのは @emotion/styled と framer-motion です。またdaisyUIはコンポーネントの実装を所有する方式ではなく、Tailwindにユーティリティクラスを足すCSSプラグイン方式である点が、コードを所有するshadcn/uiとの違いです。

「決められたデザインをすぐ使いたい」ならMUIやChakra UIが手軽で、Reactベースの選択肢としてはChakra UI の基本的な使い方とその利便性についてのガイドやYamada UIとは何か？Reactコンポーネントライブラリの概要も参考になります。一方で「デザインを細部まで作り込み、コードを自分で管理したい」ならshadcn/uiが向いています。Tailwind系同士の比較はTailwind CSSとEmotionの基本的な特徴と違いについての紹介も合わせて確認すると整理しやすいでしょう。

shadcn/uiとAIコーディング（v0など）との相性

shadcn/uiは、コードがプレーンなReact＋Tailwindで構成され、しかも自プロジェクト内に存在するため、AIコーディングツールと相性が良いのが近年の大きな強みです。たとえばVercelのv0は、自然言語の指示からshadcn/uiベースのUIコードを生成します。生成されたコードはそのまま自分のリポジトリで編集できるため、「AIで叩き台を作り、人が仕上げる」という流れに乗せやすいのです。CursorやGitHub Copilotのようなエディタ統合ツールとの併用でも、所有しているコードを直接補完・修正できる点が活きてきます。

よくある質問（FAQ）

shadcn/uiの読み方は？

一般に「シャドシーエヌ・ユーアイ」と読みます。「shadcn」は作者のハンドルネームに由来します。

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

shadcn/ui本体は、依存パッケージとしてnpmからインストールする使い方を前提としていません。CLIでコンポーネントのコードを自分のプロジェクトにコピーする方式です（CLIツールやRadix UIなどの依存は内部で追加されます）。コードを所有して自由に編集できる点が、従来のライブラリとの最大の違いです。

商用利用はできる？

shadcn/uiはオープンソースで、MITライセンスのもとで公開されています。一般にMITライセンスは商用利用を含めて広く許諾されますが、利用時点の最新のライセンス表記を公式リポジトリで確認することをおすすめします。

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

本家はReact向けです。Vue/Nuxt向けにはコミュニティ主導の「shadcn-vue」が、同じ思想を踏襲して提供されています。

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

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

関連記事

• Tailwind CSS v4の主な変更点と新機能の概要
• Chakra UI の基本的な使い方とその利便性についてのガイド
• Yamada UIとは何か？Reactコンポーネントライブラリの概要
• Vercel v0とは何か：最新技術の概要とその背景について
• Tailwind CSSとEmotionの基本的な特徴と違いについての紹介