未経験でも気軽に！サブスク型プログラミングスクール【Freeks】
困ってた自分に届けたい話
CSSって実装方法いろいろありますよね。
.cssファイル作ってインポート- タグに
style={{}}で直接書く - Sass や CSS Modules、Styled Components などのライブラリも…
「とりあえず動くけど、チーム開発だとCSSが競合してグチャグチャになる…」
「時間かけてUI組んだのに、おしゃれにならない…」
そんな悩みを抱えていた自分が「これだ！」と思えたのが、shadcn/ui というUIライブラリでした。
この記事は、同じように困っていた方への備忘録兼シェアとして書いています。
shadcn/uiとは？
shadcn/ui は、Tailwind CSS をベースにした、柔軟で拡張可能な UI コンポーネント集です。
よく使うパーツ（ボタン、モーダル、チェックボックスなど）がすぐ使える状態で提供され、しかも自分のプロジェクトに直接コンポーネントのコードが追加されるのが特徴です。
他のUIライブラリとの比較
❌ 普通のUIライブラリ（npmパッケージ）
npm installで ライブラリをインストールするだけ- 中身（ボタンの見た目など）は 触れない・カスタムしにくい
- 例：MUI、Chakra UI、Bootstrap
✅ shadcn/ui（プロジェクトに直接追加される）
- コマンドで UI コンポーネントの実物のコードを自分のプロジェクトにコピーしてくれる
- コピーされたコンポーネントは
/components/ui/button.tsxなどに置かれる - 自分で見た目や動きを好きに変更できる（完全に自作と同じ感覚）
▶ UIライブラリの比較表
| ライブラリ | カスタマイズ性 | スタイリング | メンテナンス性 | 使いやすさ |
|---|---|---|---|---|
| shadcn/ui | ◎（自由編集可） | Tailwind CSS（自由） | 自分で管理（柔軟） | ◯ |
| MUI | △（props依存） | styled-components風 | バージョン依存が強い | ◎ |
| Chakra UI | ◯（props多い） | Emotionベース | 安定している | ◎ |
| Tailwind UI | △（HTMLベース） | Tailwind CSS | 商用ライセンス必要 | ◯ |
| Bootstrap | ×（固定） | 独自CSS | 重い＆レガシー | △ |
shadcn/uiは「柔軟さ」と「今風の設計」が強み。
プロジェクトのデザインや設計方針にこだわりたいチームやエンジニアに向いています。
shadcn/ui 導入手順
下記の前提条件のもと、shadcn/ui 導入手順をご説明します。
- Next.js（React）プロジェクト
- Tailwind CSSがすでに導入済み
STEP１：初期化
# 初期セットアップ（初回のみ）
npx shadcn@latest init⚠️ 注意「shadcn-ui@latest」は非推奨？
npx shadcn-ui@latest init のコマンドは古いコマンドです。これを使うと「古い CLI です」とエラーが出ることがあります。現在は上記のように shadcn に名前が変更されています。
STEP２：初期設定 バージョン
Need to install the following packages:
shadcn@2.9.2
Ok to proceed? (y) yshadcnのバージョン2.9.2を一時的にインストールして使ってもいいか？npxは必要なパッケージをその場で取得して実行する
という確認です。y を入力すれば、そのまま shadcn CLI が使えるようになります。
STEP３：初期設定 UIの色選択
Which color do you want to use as base color?
- Slate
- Gray
- Zinc
- Neutral
- Stone
- Red
- Blue
- GreenUIのカラー選択について聞かれています。
📝 補足：色選択の戦略
| カラー | 特徴・印象 | 向いている用途 | 傾向・人気度 |
|---|---|---|---|
| Gray | 標準的なグレー。無難で柔軟性が高い | BtoC向けUI全般。カラフルなアクセントと相性◎ | shadcn初期からの定番 |
| Zinc | クールでメカっぽい無機質な印象 | 開発者向けダッシュボード、技術系LPなど | 最近人気上昇中 |
| Neutral | 脱色感のある、最も中立的な色合い | ミニマル・モダンなサイト向け | 人気はやや低め |
| Stone | わずかに茶系の温かみあり | 雑誌風UI、ナチュラル系、アート系LPなど | おしゃれ系・差別化目的で選ばれる |
STEP４：UIコンポーネントを追加
下記のコマンドを実行すると src/components/ui配下にそれぞれのUIファイルが作成されます。
Tailwind CSS のクラスを使ってスタイリングされており、即他のコンポーネントでimportして利用できます。フォルダ移動しても問題ありません。
# ボタンを追加
npx shadcn@latest add button
# inputタグを追加
npx shadcn@latest add input
# チェックボックスを追加
npx shadcn@latest add checkboxshadcn/ui 実装
import { Input } from "@/components/ui/input";
import { Checkbox } from "@/components/checkbox";
import { Button } from "@/components/ui/button";
export default function Home() {
return (
<div className=" flex flex-col items-center space-y-4 mt-10">
<Input placeholder="メールアドレスを入力" className="w-[18rem]" />
<div className="flex items-center">
<Checkbox id="terms" />
<label htmlFor="terms" className="ml-2 text-sm">
利用規約に同意する
</label>
</div>
<Button>送信</Button>
</div>
);
}▶ 実際に表示されるUI
たった数行のコードで、ここまでスタイリッシュなフォームが作れます！
初期化してから10分かからないくらいです。とても簡単です。
知っておきたい実装方法「スタイルの切り替えスイッチ」
CSSを書いていると、同じ見た目のように見えて少しだけスタイルが違う、というパターンが増えてきます。
たとえば…
- 青い「送信」ボタン
- 赤い「削除」ボタン
- 枠だけの「戻る」ボタン
こんなふうに種類を切り替えたい時に、毎回 className を条件分岐するのって大変です。そんなときに便利なのが、variant という考え方です。
variant を使うと、スタイルの管理が楽！
variant はざっくり言うと、「スタイルの種類をキーワードで切り替える仕組み」です。
ボタンを例にすると、このように実装できます。
import { Button } from "@/components/ui/button";
export default function Home() {
return (
<div className=" flex flex-col items-center space-y-4 mt-10">
<Button>デフォルト</Button>
<Button variant="destructive">削除</Button>
<Button variant="outline">戻る</Button>
</div>
);
}
▶ 実際に表示されるUI
文字列で渡すだけで、見た目がガラッと変わります。
この variant="◯◯" がスタイルの切り替えスイッチになるんです。
中身はカスタマイズOK！
実はこの variant の仕組みは button.tsx に定義されています。
たとえば以下のように書かれています。
// components/ui/button.tsx の一部
const buttonVariants = cva(
"inline-flex items-center justify-center text-sm font-medium",
{
variants: {
variant: {
default:
"bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
destructive:
"bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
outline:
"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
},
},
defaultVariants: {
variant: "default",
},
}
);つまり、この button.tsx ファイルを自由に編集ができます！
たとえば、次のように variant に custom を追加すれば…
custom: "bg-purple-500 text-white hover:bg-purple-600"オリジナルのスタイルが使えるようになります。
<Button variant="custom">カスタム</Button>と書くだけで、紫色のカスタムボタンが表示されます。
ライブラリに依存せず、自分好みのデザインに柔軟にカスタマイズできるのが shadcn/ui の大きな魅力です。
shadcn/ui のメリット・デメリット
メリット
- ✅ 自由に編集できる
コードがプロジェクトに含まれるため、業務要件に合わせて修正可能 - ✅ Tailwindと相性抜群
スタイリングが統一され、CSS設計に悩まなくて済む - ✅ 導入が簡単
npx shadcn@latest add xxxでどんどん追加できる - ✅ 全てオープンな React コンポーネント
依存性を最小限に抑えられる
デメリット
- ❌ バージョン管理は自己責任
一括更新されないのでメンテの工夫が必要 - ❌ 生成ファイルが増える
チーム内で「どこから来たファイルか」把握する工夫が必要
UIライブラリで次におすすめなのはこちらです🤞
どんなプロジェクトに向いてる？
| 向いているプロジェクト | 理由 |
|---|---|
| BtoB SaaS系 | UIに一貫性が必要で、カスタマイズ性が重要 |
| スタートアップ | 開発速度が早く、軽量で変更に強い構成が求められる |
| 小〜中規模チーム開発 | 全員が同じUIスタイルを使いやすくなる |
| Tailwindを使っている | スタイリングが完全に統一できる |
おつかれさまでした！
コメント