shadcn/uiはなぜAIと相性が良いのか？MUIと比較して見えた違い

こんにちは、花王株式会社の @TsuchiyaK です。

GitHub CopilotやCursorなどのAIコーディングツールが普及し、UIの実装方法も変わりつつあります。そんな中「shadcn/uiはAIと相性が良い」という話を耳にしました。

そこで本記事では、普段MUIを使っている筆者がshadcn/uiを試し、AIで実装する前提で両者を比較した結果をまとめます。

shadcn/uiとは

shadcn/uiは、Radix UIとTailwind CSSをベースにしたコンポーネント集です。ただし、npmパッケージとしてインストールする従来のUIライブラリとは異なり、コンポーネントのソースコードを直接プロジェクトにコピーするという独特のアプローチを取っています。

# コンポーネントの追加例
pnpm dlx shadcn@latest add button

このコマンドを実行すると、src/components/ui/button.tsxのようなファイルがプロジェクト内に生成されます（生成先は設定によって異なります）。

MUIとshadcn/uiの基本的な違い

観点	MUI	shadcn/ui
導入方法	npm install	CLIでコード生成
コンポーネントの場所	node_modules	プロジェクト配下（例: src/components/ui/）
スタイリング	emotion (CSS-in-JS)	Tailwind CSS
カスタマイズ	Theme / sx props	ソースコードを直接編集
バンドルサイズ	やや大きい	必要なものだけ
TypeScript	型定義済み	型定義済み

AIとの相性：なぜshadcn/uiが有利なのか

1. コードがプロジェクト内に存在する

shadcn/uiの最大の特徴は、コンポーネントのソースコードがプロジェクト内に存在することです。

src/
├── components/
│   └── ui/
│       ├── button.tsx    ← AIから見える
│       ├── card.tsx      ← AIから見える
│       └── dialog.tsx    ← AIから見える

AIコーディングツールはプロジェクト内のファイルをコンテキストとして参照できるため、既存のコンポーネントの実装を理解した上で、一貫性のあるコードを生成できます。

また、shadcn/uiは必要なコンポーネントだけを選んで追加する仕組みのため、src/components/ui/ に置かれるのは実際にプロジェクトで使用しているコンポーネントのみです。そのため、AIのコンテキストに余分なコードが混入しにくく、参照の精度が上がりやすいという利点もあります。

一方、MUIのコンポーネントは主にnode_modules内にあるため、プロジェクト内の実装と比べるとAIの参照コンテキストに入りにくい可能性があります。

node_modules/
└── @mui/
    └── material/
        └── Button/
            └── Button.js  ← AIから見えにくい

2. Tailwind CSSとの相性

shadcn/uiはTailwind CSSでスタイリングを行います。Tailwindのユーティリティクラスは命名規則が比較的明確なため、AIでもスタイル指定を補完しやすい傾向があります。

// shadcn/ui + Tailwind: AIが生成しやすい
<Button className="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md">
  送信
</Button>

MUIの場合、sx propsやTheme APIを使ったスタイリングが中心になります。MUIには複数のスタイリング手法があるため、プロジェクトで採用する記法を明示しない場合は、AIの出力に異なる書き方が混在することがあります。

// MUI: テーマを使った一般的な書き方
<Button
  sx={{
    backgroundColor: 'primary.main',  // ← theme参照の書き方
    '&:hover': {
      backgroundColor: 'primary.dark',
    },
  }}
>
  送信
</Button>

3. UI生成ツールとの連携

Vercelが提供するv0は、プロンプトからUIコンポーネントを生成するサービスですが、出力形式がshadcn/ui前提になっています。ツールで生成したコードをそのままプロジェクトに取り込めるのは大きなメリットかと思います。

実装例の比較

同じUIをAI（GitHub Copilot）に実装させた場合の違いを見てみましょう。

カード型のユーザープロフィール

shadcn/uiでの実装

プロンプト：「ユーザーのアバター、名前、メールアドレスを表示するカードコンポーネントを作成して」

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Card, CardHeader } from "@/components/ui/card"

interface UserProfileCardProps {
  name: string
  email: string
  avatarUrl?: string
}

export function UserProfileCard({ name, email, avatarUrl }: UserProfileCardProps) {
  return (
    <Card className="w-80">
      <CardHeader className="flex flex-row items-center gap-4">
        <Avatar>
          <AvatarImage src={avatarUrl} alt={name} />
          <AvatarFallback>{name.charAt(0)}</AvatarFallback>
        </Avatar>
        <div>
          <h3 className="text-lg font-semibold">{name}</h3>
          <p className="text-sm text-muted-foreground">{email}</p>
        </div>
      </CardHeader>
    </Card>
  )
}

MUIでの実装

同じプロンプトでMUI向けに生成：

import Avatar from '@mui/material/Avatar'
import Card from '@mui/material/Card'
import CardHeader from '@mui/material/CardHeader'
import Typography from '@mui/material/Typography'

interface UserProfileCardProps {
  name: string
  email: string
  avatarUrl?: string
}

export function UserProfileCard({ name, email, avatarUrl }: UserProfileCardProps) {
  return (
    <Card sx={{ width: 320 }}>
      <CardHeader
        avatar={
          <Avatar src={avatarUrl} alt={name}>
            {name.charAt(0)}
          </Avatar>
        }
        title={<Typography variant="subtitle1">{name}</Typography>}
        subheader={<Typography variant="body2" color="text.secondary">{email}</Typography>}
      />
    </Card>
  )
}

どちらも正しく動作するコードが生成されましたが、shadcn/uiの方はTailwindクラスで柔軟にスタイルを調整しやすく、MUIの方はCardHeaderのtitle/subheader propsなど、API固有の書き方を覚えておく必要があります。

MUIの優位性

shadcn/uiがAIと相性が良いことは確かですが、MUIにも明確なメリットがあります。

1. 圧倒的なコンポーネント数

MUIは100以上のコンポーネントを提供しています。DataGrid、DatePicker、Autocompleteなど、複雑なコンポーネントが充実しており、これらをゼロから実装する必要がありません。

shadcn/uiは必要最小限のコンポーネントに絞られており、複雑なものは自分で実装するか、別のライブラリを組み合わせる必要があります。

2. アクセシビリティへの配慮

MUIはWAI-ARIAを意識して設計されており、アクセシビリティに配慮した実装を行いやすいという強みがあります。shadcn/uiもRadix UIベースでアクセシブルですが、カスタマイズ時には利用側でも配慮が必要です。

3. 既存資産の活用

すでにMUIで構築されたプロジェクトを、AIとの相性だけを理由にshadcn/uiに移行するのは現実的でないかと思います。

使い分けの指針

シーン	おすすめ
新規プロジェクト + AIフル活用	shadcn/ui
v0などで生成したUIを使いたい	shadcn/ui
複雑なデータテーブルやフォームが必要	MUI
既存のMUIプロジェクトの拡張	MUI

まとめ

shadcn/uiがAIと相性が良いと言われる理由は、以下の点に集約されます。

1. コンポーネントがプロジェクト内にある → AIがコンテキストとして参照できる
2. Tailwind CSSベース → AIが高精度でスタイルを生成できる
3. v0などのAIコーディングツールとの連携 → 生成したコードをそのまま使える

一方で、MUIは豊富なコンポーネント、堅牢なアクセシビリティなどの強みがあります。

「AIとの相性」という観点だけでUIライブラリを選ぶのではなく、プロジェクトの規模・要件・チーム構成などを考慮して総合的に判断することが重要なのではないかと思います。

個人的には、新規の小規模プロジェクトではshadcn/uiを試しつつ、複雑な要件や既存資産がある場合はMUIを継続使用する、という使い分けが現実的だと感じました。

参考リンク

• shadcn/ui
• MUI (Material UI)
• Tailwind CSS
• Radix UI
• v0 by Vercel