A Dad-of-Two Engineer's Development Diary 2児のパパ系Webエンジニア の開発日記

shadcn/ui を React プロジェクトに導入したら、UIコンポーネント開発がかなり楽になった話

React プロジェクトに shadcn/ui を導入したところ、デザインの一貫性を保ちながらコンポーネントを自由にカスタマイズできて、UIの実装速度がかなり上がりました。

テック

🙌 結論から

個人の React プロジェクトに shadcn/ui を導入したところ、ボタン・ダイアログ・フォームをほぼゼロから書かなくてよくなり、実装速度がかなり上がりました！

npm パッケージとして依存を追加するのではなく、コンポーネントのコードをそのままプロジェクトに置いていく方式なので、あとから自由にいじれます。

最初は「ライブラリを入れる」感覚で構えていたんですが、実際はコードをもらってきて自分のものにする感じで、この距離感がかなり気に入りました(^o^)/

フロントエンドの UI 実装にいちいち時間を取られたくない人には、正直かなりおすすめです。

💡 shadcn/ui とはなにか

shadcn/ui は、ヘッドレスUIライブラリと Tailwind CSS をベースにした、再利用可能なUIコンポーネント集です。

MUI や Chakra UI のような一般的な UI ライブラリと違うのは、npm でインストールするのではなく、コンポーネントのソースコードをプロジェクトに直接コピーしてくるという点なんですよね。

この仕組みのおかげで依存が増えないですし、見た目や挙動を完全に自分でコントロールできます。

もともとは Radix UI がベースだったんですが、2026年7月から新規プロジェクトのデフォルトが Base UI に切り替わりました。Radix UI も引き続きサポートされているので、既存プロジェクトが慌てて移行する必要はないみたいです。私のプロジェクトは Radix のまま動かしていますが、どちらのベースでもアクセシビリティ（a11y）まわりが最初からちゃんとしてるのはうれしいところです✨

👀 試してみた

まず初期設定から始めます。

npx shadcn@latest init

対話形式でサクッと設定が終わります。Tailwind CSS が前提なので、事前に入れておいてくださいね。

コンポーネントの追加は、欲しいものを1コマンドで呼ぶだけです。

npx shadcn@latest add button
npx shadcn@latest add dialog
npx shadcn@latest add form

実行すると components/ui/ の下にファイルが生成されます。

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

export default function Example() {
  return (
    <Button variant="outline">クリック</Button>
  );
}

ファイルはがっつりプロジェクト内にあるので、そのまま開いて好きに書き換えられます！

🔧 使い込んで気づいた、かなり助かるポイント

一通り触って落ち着いてから気づいたことが何個かあったので、ここに書いておきます。

まず意外と助かったのが、class-variance-authority（通称 cva）を使った variant 管理です。

Button のコード生成直後をよく見ると、cva でこんな感じに variant がまとめられています。

const buttonVariants = cva(
  "inline-flex items-center justify-center rounded-md text-sm font-medium",
  {
    variants: {
      variant: {
        default: "bg-primary text-primary-foreground",
        outline: "border border-input bg-background",
        ghost: "hover:bg-accent hover:text-accent-foreground",
      },
      size: {
        default: "h-9 px-4",
        sm: "h-8 px-3",
        lg: "h-10 px-6",
      },
    },
  }
);

自社サービス用に variant="danger" を1個増やしたいとき、この variants オブジェクトに1行足すだけで済むので、「自作コンポーネントに毎回 className を三項演算子で出し分ける」みたいな地獄から解放されました(・∀・)

もうひとつ、これは知らないと損してるなと思ったのが add コマンドの --diff オプションです。

shadcn/ui はコンポーネントを「コピーしてくる」方式なので、本家側で修正やバグ潰しが入っても普通は気づけません。

でも、更新したいコンポーネント名を指定して次のように打つと、いま自分のプロジェクトにあるファイルと本家の最新版を見比べて、どこが変わったかを教えてくれます。

npx shadcn@latest add button --diff

先にどのファイルが影響を受けるか把握したいときは --dry-run を付けると、書き込まずにプレビューだけしてくれるので、まずはこちらで様子見するのもありです。

取り込むかどうかは自分で判断できるので、「アップデートで急に見た目が変わって焦る」みたいなことが起きないのも安心ポイントです。

最初は add して終わりと思っていたんですが、実際に運用してみると --diff の存在にかなり救われています🙏

👍 使ってみた感想

一番よかったのは、アクセシビリティ対応が最初から入っているところです。

Dialog を使うと、フォーカストラップ・Esc キーでの閉じる動作・スクリーンリーダー対応が自動で付いてきます。

これ、自前で実装しようとするとかなり手間がかかる部分なので、相当助かりました(｡•̀ᴗ-)✧

デザインの統一感を保ちやすいのも気に入っているポイントです。

ボタンやフォーム部品が同じデザインシステムに乗っているので、ページをまたいでも見た目がバラつきにくいんですよね。

ひとつだけ注意点を挙げるなら、Tailwind CSS が前提なところです。

Tailwind を使っていないプロジェクトへの導入は正直厳しいので、これから新規で始めるプロジェクトか、すでに Tailwind を使っているプロジェクト向けと考えたほうがよさそうです。

パパ系Webエンジニア〜愛用ガジェット一覧 🛍️

この記事を書いている作業環境のガジェットを楽天ROOMにまとめています ✨ 在宅エンジニアのデスク作りの参考にどうぞ 🙌

🙌 まとめ

shadcn/ui は、UIコンポーネントを「ライブラリとして依存する」んじゃなくて「コードとして所有する」という考え方が新鮮でした。

  • Radix UI / Base UI ベースでアクセシビリティ対応済み（2026年7月から新規はBase UIがデフォルト）
  • コンポーネントのコードがプロジェクト内にあるので自由にカスタマイズできる
  • cva で variant を増やすのが1行で済む
  • add --diff で本家アップデートを安全に取り込める
  • デザインの統一感が出しやすい
  • Tailwind CSS が前提（導入済みのプロジェクト向け）

フロントエンドのUI実装に時間を取られがちだった私にとって、正直かなり助かるツールになっています🙌

まだ触ったことがない方は、まずは npx shadcn@latest add button からお試しあれ(^^)