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