コンポーネント一覧へ戻る
予約スロットピッカー React コンポーネント

これは何か

打ち合わせの時間を選ぶ白い予約パネルです。上に「30 min intro call with Aiko Mori」の行、その下に7日ぶんの日付と週送りの矢印、30分刻みの空き時間、タイムゾーンが並びます。日を選ぶと白い pill が滑り、その日の時間が順に現れます。時間を選ぶと枠が「10:30」と黒い Confirm に横へ分かれます。Confirm を押すと、パネルが高さを変えながら完了カードに切り替わり、チェック・日付・時刻・Add to calendar が出ます。Back で選択に戻ります。主催者と空き時間を差し替えて、予約ページや営業の日程調整にそのまま置けます。

コンポーネント

予約スロットピッカー

打ち合わせの時間を選ぶ白い予約パネルです。上に「30 min intro call with Aiko Mori」の行、その下に7日ぶんの日付と週送りの矢印、30分刻みの空き時間、タイムゾーンが並びます。日を選ぶと白い pill が滑り、その日の時間が順に現れます。時間を選ぶと枠が「10:30」と黒い Confirm に横へ分かれます。Confirm を押すと、パネルが高さを変えながら完了カードに切り替わり、チェック・日付・時刻・Add to calendar が出ます。Back で選択に戻ります。主催者と空き時間を差し替えて、予約ページや営業の日程調整にそのまま置けます。

確認しています…
ライブプレビュー

Verified Technical Spec

アニメーション
CSS / Tailwind
Reduced motion
確認済み
キーボードフォーカス
確認済み
対応環境
Tailwind CSS v3.4 + v4 · React 19 / Next.js 15 App Router + Vite / Remix 対応

含まれるもの

  • ソースを Cursor / Claude に渡してエージェントに組み込める
  • React · TypeScript · Tailwind CSS · Lucide の完成 UI

依存パッケージ

  • React 19.0.0
  • Typescript 5.7.2
  • Tailwindcss 3.4.16
  • Lucide-react 1.23.0

技術スタック

  • React
  • TypeScript
  • Tailwind CSS
  • Lucide

バージョン 1.0.0