Responsive Design
Overview of the Travel Agent booking form’s responsive design, ensuring seamless usability and visual consistency across all devices through Next.js, React, and shadcn/ui components.
The Travel Agent booking form is built with Next.js and React, using shadcn/ui components and Tailwind CSS under the hood. It follows a mobile-first, fluid layout strategy to ensure optimal usability on all screen sizes.
Core Principles
- Mobile-First Breakpoints
Styles are defined using a mobile-first approach, beginning at the smallest viewport and scaling up. Default breakpoints align with Tailwind’s conventions (sm,md,lg,xl). - Flexible Containers
The<BookingForm>component utilizes CSS Grid and Flexbox to dynamically reorganize fields and buttons based on the available width. - Fluid Typography & Spacing
Relative units (rem,%) and CSS variables are used for padding, margins, and font sizes, ensuring automatic adjustment across breakpoints. - Iframe Responsiveness
The embedded form detects container width changes usingResizeObserverand applies appropriate layout classes for optimal display.
shadcn/UI Integration
- Utility-First Approach
All components leverage Tailwind utility classes to support responsive variants (e.g.,md:grid-cols-2,lg:px-8). - Configurable Tokens
Breakpoints and spacing scales can be customized by extending your Tailwind configuration and rebuilding the form bundle.
For advanced layout options and style overrides, refer to the Booking Form Styling Guide.
Payment Integration
Payment Gateway integration features in the Travel Agent Web Booking.
Icelandic Social Security Number Validation and Lookup
The Travel Agent booking form provides integrated support for Icelandic social security numbers (kennitala), including real-time format and checksum validation. When enabled, the form can also perform secure lookups to auto-populate user name and address, streamlining the booking process.