Shadcn.io is not affiliated with official shadcn/ui
Stepper Booking Reservation
A multi-step hotel booking reservation wizard with date selection, room choice, guest details, and confirmation steps plus a persistent booking summary built with React, Next.js, shadcn/ui, and Tailwind CSS
Streamline hotel and travel reservations with this multi-step booking stepper for React and Next.js. Horizontal step indicators with contextual icons walk guests through date selection, room choice, guest details, and booking confirmation. A persistent summary bar displays the running booking total and selected options. Built with TypeScript, shadcn/ui Button and Badge components, and Tailwind CSS for a clean, professional hospitality booking experience.
Related Components
Checkout Flow Stepper
E-commerce checkout wizard with cart and payment
Account Setup Stepper
Split-panel account creation wizard
Onboarding Guide Stepper
App onboarding wizard with dot progress
Profile Completion Stepper
Checklist stepper with circular progress ring
Horizontal Numbered Stepper
Classic horizontal numbered stepper with progress lines
Review Confirmation Stepper
Review and confirm workflow stepper
FAQ
Was this page helpful?
Sign in to leave feedback.
Auto Advance
An automated pipeline stepper that auto-advances through steps with progress indicators, countdown timers, and pause control built with React, Next.js, shadcn/ui, and Tailwind CSS
Bottom Bar Mobile
A mobile-optimized stepper with full-width content area, fixed bottom navigation bar with step dots, back/next buttons, and step counter built with React, Next.js, shadcn/ui, and Tailwind CSS