🧩 コンポーネント一覧
「バスケしようよ！」で使用するUIコンポーネントのカタログです。
UIパターン
デザインプレビューで使用されている共通UIパターンです。
確認モーダル
破壊的操作（アカウント削除、ログアウト等）の前に表示する確認ダイアログ
操作の確認
この操作は取り消せません。本当に実行しますか？
使用箇所:
- プロフィール編集 → アカウント削除
- マイページ → ログアウト
検索バー
募集検索やフィルタリングに使用する検索フォームパターン
🔍エリア、キーワードで検索
渋谷区初心者歓迎今週末
使用箇所:
- トップページ → ヒーローセクション検索
- 募集一覧 → フィルター
リストアイテム
通知、チャット、参加者一覧等で使用するリストアイテムパターン
田
田中さんが募集に参加しました
5分前
山
山田さんからメッセージが届きました
1時間前
使用箇所:
- 通知一覧（未読/既読状態）
- チャット一覧
- 参加者一覧
ステップインジケーター
複数ステップのフロー（新規登録、パスワードリセット等）で進捗を表示
1
2
3
ステップ 2 / 3
使用箇所:
- 新規登録フロー（3ステップ）
- パスワードリセット（3ステップ）
- 募集作成
基本コンポーネント
共有UIライブラリ（ui.tsx）から提供される再利用可能なコンポーネントです。
Button
アクションを実行するためのボタンコンポーネント
Variants
Sizes
States
Full Width
Input
テキスト入力フィールドコンポーネント
Basic
Required
With Error
パスワードは8文字以上で入力してください
Types
Card
コンテンツをグループ化するカードコンポーネント
Basic Card
カードタイトル
カードの中にはどんなコンテンツでも配置できます。
Hoverable Card
クリック可能なカード
ホバーでシャドウが変化します。クリックしてみてください。
Badge
ステータスやラベルを表示するバッジコンポーネント
デフォルト初心者歓迎中級者向け残りわずか締め切り
Avatar
ユーザーアイコンを表示するアバターコンポーネント
Sizes
S
M
L
With Fallback
田
山
佐
EventCard
募集情報を表示する専用カードコンポーネント
1/27(土) 14:00-17:00
初心者歓迎！渋谷でバスケ
渋谷区スポーツセンター
初心者歓迎無料
8/10
1/28(日) 10:00-12:00
経験者ピックアップゲーム
新宿区立体育館
経験者向け1,000円
12/15
Header
ページ上部に表示するヘッダーコンポーネント
Default (Logo)
バスケしようよ！
With Title
募集詳細
With Right Action
参加者管理
EmptyState
データがない状態を表示するコンポーネント
🏀
参加予定の募集はありません
近くの募集を探して参加してみましょう！
Spinner
ローディング状態を表示するスピナーコンポーネント
Small
Medium
Large
BottomNav
モバイル向け下部ナビゲーションコンポーネント