未経験でも気軽に!サブスク型プログラミングスクール【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がすでに導入済み
STEP1:初期化
# 初期セットアップ(初回のみ)
npx shadcn@latest init
⚠️ 注意「shadcn-ui@latest」は非推奨?

npx shadcn-ui@latest init
のコマンドは古いコマンドです。これを使うと「古い CLI です」とエラーが出ることがあります。現在は上記のように shadcn
に名前が変更されています。
STEP2:初期設定 バージョン
Need to install the following packages:
shadcn@2.9.2
Ok to proceed? (y) y
shadcn
のバージョン2.9.2
を一時的にインストールして使ってもいいか?npx
は必要なパッケージをその場で取得して実行する
という確認です。y
を入力すれば、そのまま shadcn
CLI が使えるようになります。
STEP3:初期設定 UIの色選択
Which color do you want to use as base color?
- Slate
- Gray
- Zinc
- Neutral
- Stone
- Red
- Blue
- Green
UIのカラー選択について聞かれています。
📝 補足:色選択の戦略
カラー | 特徴・印象 | 向いている用途 | 傾向・人気度 |
---|---|---|---|
Gray | 標準的なグレー。無難で柔軟性が高い | BtoC向けUI全般。カラフルなアクセントと相性◎ | shadcn初期からの定番 |
Zinc | クールでメカっぽい無機質な印象 | 開発者向けダッシュボード、技術系LPなど | 最近人気上昇中 |
Neutral | 脱色感のある、最も中立的な色合い | ミニマル・モダンなサイト向け | 人気はやや低め |
Stone | わずかに茶系の温かみあり | 雑誌風UI、ナチュラル系、アート系LPなど | おしゃれ系・差別化目的で選ばれる |
STEP4:UIコンポーネントを追加
下記のコマンドを実行すると src/components/ui配下にそれぞれのUIファイルが作成されます。

Tailwind CSS のクラスを使ってスタイリングされており、即他のコンポーネントでimportして利用できます。フォルダ移動しても問題ありません。
# ボタンを追加
npx shadcn@latest add button
# inputタグを追加
npx shadcn@latest add input
# チェックボックスを追加
npx shadcn@latest add checkbox
shadcn/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を使っている | スタイリングが完全に統一できる |

おつかれさまでした!
コメント