shadcn/ui demo
shadcn/uiコンポーネントのデフォルト値での動作確認用
Badge コンポーネント
デフォルト
セカンダリ
成功
警告
エラー
アウトライン
情報
99+
小サイズ
中サイズ
大サイズ
Button コンポーネント
Card コンポーネント
Cardはコンテンツをグループ化するための汎用コンポーネントです。ヘッダ、コンテンツを含めたレイアウト例を示します。
Dialog コンポーネント
Alert コンポーネント
デフォルトアラート
これはデフォルトのアラートメッセージです。
エラーアラート
これはエラーのアラートメッセージです。
Avatar コンポーネント
CNJDAB
DropdownMenu コンポーネント
Select コンポーネント
Input コンポーネント
Form コンポーネント
Sheet コンポーネント
Tabs コンポーネント
タブ1の内容です。
Toast コンポーネント
Accordion コンポーネント
これはアコーディオンの内容です。クリックして展開/折りたたみできます。
Checkbox コンポーネント
チェック状態: オフ
Progress コンポーネント
0%100%
33%Slider コンポーネント
値: 50
Switch コンポーネント
スイッチ状態: オフ
Textarea コンポーネント
文字数: 16
Tooltip コンポーネント
Alert Dialog コンポーネント
Calendar コンポーネント
size
選択日: 2026/1/30
Collapsible コンポーネント
Command コンポーネント
結果が見つかりません。
プロフィール
設定
ログアウト
Context Menu コンポーネント
Hover Card コンポーネント
Popover コンポーネント
Radio Group コンポーネント
選択: option1
Scroll Area コンポーネント
縦スクロール
横スクロール
アイテム 1
アイテム 2
アイテム 3
アイテム 4
アイテム 5
アイテム 6
アイテム 7
アイテム 8
アイテム 9
アイテム 10
Separator コンポーネント
上部コンテンツ
下部コンテンツ
Skeleton コンポーネント
Table コンポーネント
| 名前 | 年齢 | 役割 |
|---|---|---|
| 名前 1 | 25 | 役割 1 |
| 名前 2 | 26 | 役割 2 |
Toggle コンポーネント
状態: 未押下
Breadcrumb コンポーネント
Tailwind CSS Colors
background
foreground
card
popover
primary
secondary
muted
accent
destructive
success
warning
border
input
ring
chart-1
chart-2
chart-3
chart-4
chart-5
CSS変数をTailwindクラスとして利用し色を設定できます。