loading . . .|
React・Next.js 開発におけるUI設計とコンポーネント設計の学習を目的とした shadcn/ui 実装デモページです。
本ページは、React と Next.js を用いたフロントエンド開発において、 shadcn/ui の各種コンポーネントの挙動や設計思想を理解するための 学習用デモページです。実際の操作を通じて、UI設計の基礎と応用を学べます。
Cardはコンテンツをグループ化するための汎用コンポーネントです。ヘッダ、コンテンツを含めたレイアウト例を示します。
タブ1の内容です。
チェック状態: オフ
値: 50
スイッチ状態: オフ
文字数: 16
選択日: 2026/4/9
選択: option1
| 名前 | 年齢 | 役割 |
|---|---|---|
| 名前 1 | 25 | 役割 1 |
| 名前 2 | 26 | 役割 2 |
状態: 未押下
CSS変数をTailwindクラスとして利用し色を設定できます。