UITailwind UI Samples

Components

ボタン・フォーム・カード・テーブル・レイアウトなど、業務アプリの基本 UI。（30 種）各ページでプレビューとコードを確認し、そのままコピーして使えます。

共通部品（src/components/ui）

サンプルはこれらの部品を組み合わせて作っています。各サンプルの Code タブで部品のソースもタブ切替で確認できます。

Button

variant（色）と size（大きさ）を props で切り替えるボタン。

例：Button Variants ほか 30 件

Card

Card / CardHeader / CardContent / CardFooter の組み合わせで作るカード。

例：Login Form ほか 9 件

Badge

tone で色を選ぶステータス表示。dot / pill 対応。

例：Basic Card ほか 7 件

Input / Field

Input・Textarea・Select と、ラベル + ヘルプ + エラーをまとめる Field。

例：Text Input ほか 9 件

Avatar

イニシャル表示・サイズ・色・オンライン状態。

例：Profile Card ほか 7 件

Switch

ON / OFF のトグルスイッチ。

例：Toggle Switch

Alert

info / success / warning / error のメッセージ。

例：Alerts

Buttons

Button Variants

Primary / Secondary / Outline / Ghost / Danger / Link の基本バリエーション。

Button Sizes & States

サイズ違い、アイコン付き、アイコンのみ、loading、disabled。

Button Group

セグメント型の切替ボタンとツールバー型のボタン群。

Forms

Text Input

ラベル・ヘルプテキスト・エラー状態・prefix / suffix 付き入力。

Select / Checkbox / Radio

選択系フォーム部品の基本形。

Toggle Switch

useState で ON / OFF を切り替えるスイッチ。

Login Form

画面中央にカードを配置したログイン画面。

Settings Form

左に説明、右に入力欄を置く業務アプリの設定フォーム。

Search & Filter Bar

一覧画面上部の検索 + 絞り込み + アクションの横並び。

Cards

Basic Card

ヘッダー / 本文 / フッターを持つ汎用カード。

Stat Cards

ダッシュボードの KPI カード（数値と増減）。

Profile Card

アバター・プロフィール情報・アクションをまとめたカード。

Pricing Cards

3 プラン比較、おすすめプランの強調。

Data Display

Data Table

ステータスバッジと行アクション付きのテーブル。

Badges

ステータス色のバッジ、ドット付きバッジ。

Avatars

サイズ違い、イニシャル、重ね表示、オンライン表示。

Description List

詳細画面の「項目: 値」表示。

Empty State

データがないときの表示と次のアクション。

Timeline

更新履歴・アクティビティログ。

Feedback

Alerts

info / success / warning / error のメッセージ表示。

Modal Dialog

オーバーレイ + 中央配置の確認ダイアログ。

Toast

右下に出て自動で消える通知。

Progress & Skeleton

プログレスバー、スピナー、スケルトンローディング。

Navigation

Navbar

ロゴ + メニュー + アクション。モバイルではハンバーガー。

Sidebar Navigation

アイコン付きサイドメニューとアクティブ状態。

Tabs

下線タブとピル型タブ。

Breadcrumb & Pagination

パンくずリストとページネーション。

Layout

Dashboard Shell

サイドバー + ヘッダー + メイン。業務アプリの基本骨格。

Grid Layouts

レスポンシブな列数、col-span、auto-fit。

Flex Patterns

中央寄せ、左右振り分け、ページヘッダー、sticky footer。