shadcn/ui v2.5+ · Tailwind CSS v4

Admin Design System

shadcn/ui + Radix UI + Tailwind CSS v4 ベースの管理画面デザインシステム。 CSS変数による一貫したテーマと、コンポジションによる柔軟なUI構築。

Foundation

Architecture
CSS Variables
Typography
Spacing & Layout

Components (20+)

Button, Badge, Card
Dialog, Sheet, Command
Table, Tabs, Pagination
Input, Select, Checkbox

Data & Charts

Charts (Recharts)
TanStack Table
Sidebar Layout
Dashboard Blocks

Patterns

File Upload
Empty States
Dark Mode
Do's & Don'ts

Architecture

Radix UILatest

アクセシブルなプリミティブ

Tailwind CSSv4

ユーティリティファースト

CSS VariablesHSL

テーマトークン

Lucide Iconsv0.400+

一貫したアイコン

Responsive Design (Desktop First)

Desktop First 設計

管理画面は主にPCで操作されるため、デスクトップを基準に設計し、必要に応じてモバイル対応を追加

Breakpoints

xl:≥ 1280px大画面PCフルレイアウト

lg:≥ 1024px標準PCデフォルト基準

md:≥ 768pxタブレットサイドバー縮小

sm:< 768pxモバイル最小限対応

Container Width

max-w-7xl1280pxメインコンテンツ

max-w-5xl1024pxフォーム・設定

max-w-3xl768pxモーダル内コンテンツ

max-w-md448pxダイアログ

Sidebar Layout

// PC: 固定サイドバー
<aside className="
  w-64 lg:w-72
  fixed lg:sticky
  lg:top-0
">

// タブレット: 縮小
md:w-16

// モバイル: ドロワー
sm:hidden + Sheet

Grid Columns

// ダッシュボードカード
grid-cols-1
md:grid-cols-2
lg:grid-cols-4

// データテーブル
常に横スクロール対応
min-w-[800px]

Navigation

// PC: フルナビ
<nav className="
  hidden lg:flex
  items-center gap-6
">

// モバイル: ハンバーガー
lg:hidden + Sheet

Do's

• PC（lg:）を基準にデザインする
• サイドバーはPCでは常に表示
• データテーブルは横スクロール許容
• モーダル/ダイアログは max-w-md 〜 max-w-3xl
• タブレットではサイドバーをアイコンのみに縮小

Don'ts

• モバイルファーストで設計しない
• テーブルを無理に縦積みにしない
• PCでの操作性を犠牲にしない
• 複雑なフォームをモバイル最適化しない
• sm: ブレークポイントを多用しない

CSS Variables (Color Tokens)

Core Tokens

すべてのコンポーネントで使用

--background

Background

0 0% 100%

--foreground

Foreground

240 10% 3.9%

--card

Card

0 0% 100%

--primary

Primary

240 5.9% 10%

--secondary

Secondary

240 4.8% 95.9%

--muted

Muted

240 4.8% 95.9%

--accent

Accent

240 4.8% 95.9%

--border

Border

240 5.9% 90%

Semantic Tokens

状態表示にのみ使用

--destructive

Destructive（削除・エラー）

0 84% 60%

--success

Success（完了・公開中）

142 76% 36%

--warning

Warning（注意・準備中）

38 92% 50%

globals.css での定義

:root {
  --background: 0 0% 100%;
  --foreground: 240 10% 3.9%;
  --primary: 240 5.9% 10%;
  --primary-foreground: 0 0% 98%;
  --muted: 240 4.8% 95.9%;
  --muted-foreground: 240 3.8% 46.1%;
  --border: 240 5.9% 90%;
  --ring: 240 5.9% 10%;
  --radius: 0.5rem;
}

Official Components (shadcn/ui)

Button

npx shadcn@latest add button

<Button variant="default">Default</Button>
<Button variant="outline">Outline</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="destructive">Destructive</Button>
<Button variant="outline" size="icon"><Icon /></Button>

Badge

npx shadcn@latest add badge

DefaultSecondaryDestructiveOutline公開中準備中停止

Card

npx shadcn@latest add card

Total Revenue

¥2,450,000

+12.5% from last month

Orders

1,234

+8.2% from last month

Active Users

5,678

-2.1% from last month

Dialog / AlertDialog

npx shadcn@latest add dialog alert-dialog

DropdownMenu

npx shadcn@latest add dropdown-menu

Input / Select / Textarea

npx shadcn@latest add input select textarea

Enter your email address.

Role

Accept terms and conditions

Table / DataTable

npx shadcn@latest add table

Invoice	Status	Method	Amount
INV001	Paid	Credit Card	¥250,000
INV002	Pending	PayPay	¥150,000
INV003	Unpaid	Bank Transfer	¥350,000

Skeleton / Loading States

npx shadcn@latest add skeleton

Card Skeleton

Button Loading

Toast / Sonner

npx shadcn@latest add sonner

Event Created

Sunday, December 03, 2024

Success

Your changes have been saved.

Error

Something went wrong.

Tabs

npx shadcn@latest add tabs

Overview content goes here.

Pagination

npx shadcn@latest add pagination

Page 1 of 5

Command (⌘K)

npx shadcn@latest add command

Alert

npx shadcn@latest add alert

Info

This is an informational message.

Warning

Please review before proceeding.

Error

Something went wrong. Please try again.

Breadcrumb

npx shadcn@latest add breadcrumb

Avatar

npx shadcn@latest add avatar

John Doe

Admin

Sheet (Side Panel)

npx shadcn@latest add sheet

Progress

npx shadcn@latest add progress

Upload Progress75%

Processing45%

Complete100%

Sidebar (Official 25+ Components)

npx shadcn@latest add sidebar

"I don't like building sidebars. So I built 30+ of them." — shadcn

Content Area

Charts & Data Visualization

Recharts (推奨ライブラリ)

npm install recharts

Line Chart（売上推移）

月

火

水

木

金

土

日

Bar Chart（商品別売上）

L版

85%

2L版

65%

A4版

45%

フォトブック

30%

Pie Chart（カテゴリ別）

写真販売 40%

グッズ 25%

印刷 20%

その他 15%

Area Chart（アクセス数）

推奨ライブラリ

recharts

React向け、shadcn/ui公式推奨

@tremor/react

ダッシュボード特化

chart.js

軽量、汎用

Advanced Data Table (TanStack Table)

TanStack Table + shadcn/ui

npm install @tanstack/react-table

3件選択中

		ステータス
IMG-001	春ツアー A	公開中	¥156,000
IMG-002	春ツアー B	公開中	¥77,000
IMG-003	オフショット	下書き	¥0
IMG-004	MVカット A	公開終了	¥234,000

4件中 1-4件を表示

表示件数:

TanStack Table 主要機能

ソート（複数列）

フィルター

複数選択

ページネーション

列の表示/非表示

列のリサイズ

行の展開

仮想化

Blocks (Ready-made Layouts)

Dashboard

10+

KPIカード、チャート、テーブル

Authentication

ログイン、登録、パスワードリセット

Settings

プロフィール、通知、請求

Sidebar

25+

各種サイドバーレイアウト

Calendar

30+

日/週/月表示、イベント管理

Data Table

ソート、フィルター、ページネーション

インストール: npx shadcn@latest add "https://ui.shadcn.com/r/dashboard-01"

UX Patterns

File Upload / Dropzone

ドラッグ&ドロップ対応のファイルアップロード

Dropzone

ファイルをドロップ

またはクリックして選択

PNG, JPG, GIF (max 10MB)

Upload Queue

photo_001.jpg

2.4 MB

photo_002.jpg

3.1 MB

photo_003.jpg

1.8 MB

待機中

Empty State

データがない場合のUI

データがありません

まだ登録されたデータがありません

検索結果なし

条件に一致する結果がありません

画像がありません

画像をアップロードしてください

Error States & Validation

フォームバリデーションとエラー表示

Input Validation

メールアドレス

有効なメールアドレスを入力してください

ユーザー名

利用可能なユーザー名です

Alert Messages

エラーが発生しました

リクエストの処理中にエラーが発生しました。もう一度お試しください。

注意

この操作は取り消すことができません。

保存しました

変更が正常に保存されました。

Validation Best Practices

• リアルタイムバリデーションで即座にフィードバック
• エラーメッセージは具体的で行動可能に
• 必須フィールドは * で明示

• 成功状態は緑のチェックマークで表示
• エラー時は border-destructive + text-destructive
• フォーム送信前にすべてのエラーを表示

Typography

Text Hierarchy

一貫したテキスト階層

H1: Page Title `text-4xl font-extrabold`

H2: Section Title `text-3xl font-semibold`

H3: Subsection `text-2xl font-semibold`

H4: Card Title `text-xl font-semibold`

Body (Default): The quick brown fox jumps over the lazy dog.text-base leading-7

Muted: Secondary text with muted color.text-sm text-muted-foreground

Small: Fine print and helper text.text-xs text-muted-foreground

Large: Emphasized body texttext-lg font-semibold

Inline Codefont-mono bg-muted rounded

"Blockquote: A quotation or highlighted text."border-l-2 pl-6 italic

Spacing & Layout

Spacing Scale

xs

0.25rem (4px)

sm

0.5rem (8px)

md

1rem (16px)

lg

1.5rem (24px)

xl

2rem (32px)

2xl

3rem (48px)

Border Radius

rounded-none

rounded-sm

0.125rem

rounded-md

var(--radius)

rounded-lg

0.75rem

rounded-xl

1rem

rounded-full

9999px

Motion & Animation

Duration Scale

一貫した動きのタイミング

instant75ms

ホバー、フォーカス変化

fast150ms

ボタン、トグル、ドロップダウン

normal200ms

モーダル、シート、パネル

slow300ms

ページ遷移、大きな要素

Easing Functions

自然な動きのための曲線

ease-out

cubic-bezier(0, 0, 0.2, 1)

要素の出現（デフォルト）

ease-in-out

cubic-bezier(0.4, 0, 0.2, 1)

位置移動、変形

ease-in

cubic-bezier(0.4, 0, 1, 1)

要素の退出

Animation Patterns

コンポーネント別アニメーション

Button Hover

transition-colors duration-150

bg-primary/10 → bg-primary/20

Modal Enter

animate-in fade-in-0 zoom-in-95

opacity 0→1, scale 0.95→1

Sheet Slide

animate-in slide-in-from-right

translateX 100% → 0

Dropdown

animate-in fade-in-0 zoom-in-95

opacity + scale

Tailwind CSS v4 Animation Classes

animate-in, animate-out, fade-in-0, fade-out-0, zoom-in-95, zoom-out-95, slide-in-from-top, slide-in-from-bottom, slide-in-from-left, slide-in-from-right

Responsive Breakpoints

Tailwind CSS Breakpoints

モバイルファーストのレスポンシブ設計

sm:

640px

小型タブレット、横向きモバイル

2カラム、小さなカード

md:

768px

タブレット

サイドバー表示、3カラム

lg:

1024px

小型デスクトップ、大型タブレット

フル機能サイドバー

xl:

1280px

デスクトップ

4カラム、広いコンテンツ

2xl:

1536px

大型デスクトップ

最大幅コンテナ

Container Max Widths

max-w-md: 448px（フォーム）

max-w-2xl: 672px（コンテンツ）

max-w-4xl: 896px（ダッシュボード）

max-w-7xl: 1280px（フルレイアウト）

Usage Example

<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4"><aside className="hidden md:block w-64 lg:w-72">

Dark Mode Support

Theme Toggle

CSS変数による自動テーマ切り替え

Dashboard

Admin Panel

Revenue

¥2.4M

Orders

1,234

Users

5,678

CSS変数を使用することで、ダークモードは自動的に対応されます。

globals.css - Dark Mode Variables

.dark {
  --background: 240 10% 3.9%;
  --foreground: 0 0% 98%;
  --card: 240 10% 3.9%;
  --card-foreground: 0 0% 98%;
  --primary: 0 0% 98%;
  --primary-foreground: 240 5.9% 10%;
  --muted: 240 3.7% 15.9%;
  --muted-foreground: 240 5% 64.9%;
  --border: 240 3.7% 15.9%;
}

Do's and Don'ts

• CSS変数（bg-primary）を使う
• 公式コンポーネントをそのまま使う
• Radix UIのアクセシビリティを活用
• ring-offset-background でフォーカス表示
• Sonner でトースト通知
• TanStack Table でDataTable

Don't

• 直接色を指定（bg-slate-900）しない
• コンポーネントを自作しない
• outline-none 単独で使わない
• alert() や confirm() を使わない
• ブランドカラーを持ち込まない
• グラデーションを使わない

Required Components (Install All)

npx shadcn@latest add

alertalert-dialogavatarbadgebreadcrumbbuttoncalendarcardcheckboxcommanddate-pickerdialogdropdown-menuinputlabelpaginationpopoverprogressradio-groupselectseparatorsheetsidebarskeletonsonnertabletabstextareatooltip

One-liner: npx shadcn@latest add alert alert-dialog avatar badge breadcrumb button calendar card checkbox command date-picker dialog dropdown-menu input label pagination popover progress radio-group select separator sheet sidebar skeleton sonner table tabs textarea tooltip

Quick Reference

Resources

Key Principles

• CSS変数でテーマを統一
• 公式コンポーネントを優先
• Radix UIでアクセシビリティ確保
• モノクロ基調、色は状態のみ
• コンポジションで柔軟に構築

Status Colors

Success / Active / 公開中

Warning / Pending / 準備中

Error / Stopped / 停止

Neutral / Inactive / 下書き

Admin Design System

Contents

Architecture

Responsive Design (Desktop First)

Desktop First 設計

CSS Variables (Color Tokens)

Core Tokens

Semantic Tokens

Official Components (shadcn/ui)

Button

Badge

Card

Dialog / AlertDialog

DropdownMenu

Input / Select / Textarea

Table / DataTable

Skeleton / Loading States

Toast / Sonner

Tabs

Pagination

Command (⌘K)

Alert

Info

Warning

Error

Breadcrumb

Avatar

Sheet (Side Panel)

Progress

Sidebar (Official 25+ Components)

npx shadcn@latest add sidebar

Charts & Data Visualization

Recharts (推奨ライブラリ)

Advanced Data Table (TanStack Table)

TanStack Table + shadcn/ui

Blocks (Ready-made Layouts)

Dashboard

Authentication

Settings

Sidebar

Calendar

Data Table

UX Patterns

File Upload / Dropzone

Empty State

データがありません

検索結果なし

画像がありません

Error States & Validation

Typography

Text Hierarchy

H1: Page Title text-4xl font-extrabold

H2: Section Title text-3xl font-semibold

H3: Subsection text-2xl font-semibold

H4: Card Title text-xl font-semibold

Spacing & Layout

Spacing Scale

Border Radius

Motion & Animation

Duration Scale

Easing Functions

Animation Patterns

Responsive Breakpoints

Tailwind CSS Breakpoints

Dark Mode Support

Theme Toggle

Do's and Don'ts

Required Components (Install All)

Quick Reference

Resources

Key Principles

Status Colors

H1: Page Title `text-4xl font-extrabold`

H2: Section Title `text-3xl font-semibold`

H3: Subsection `text-2xl font-semibold`

H4: Card Title `text-xl font-semibold`