Travel Page React template for Tailwind CSS v4

Add to a project

Requirements: React 19 and Tailwind CSS v4, in Next.js (App Router or Pages), Vite or React Router. Installation guide · Next.js setup · Vite setup

Travel Page is part of Pro, with 298 more Pro items: $8 a month or $150 once. 14-day refund before you download any Pro item. See plans

Usage

Import TravelPage from @/components/templates/travel-page.

// app/page.tsx
"use client"

import Link from "next/link"
import { TravelPage, type TravelReservation } from "@/components/templates/travel-page"

async function reserve({ tour, departure, travelers }: TravelReservation) {
  await fetch("/api/holds", {
    method: "POST",
    body: JSON.stringify({ tour: tour.id, departure: departure.id, travelers }),
  })
}

export default function HomeRoute() {
  return <TravelPage linkComponent={Link} onReserve={reserve} />
}

Props

• toursdefault "TRAVEL_TOURS"
  TravelTour[]

  { id, title, destination, region, route, days, groupSize, rating, reviews, price, previousPrice?, scene, color, image?, badge?, pace?, summary, itinerary: { day, title, description? }[], included, excluded?, departures: { id, start (yyyy-mm-dd), seats, price? }[], href?, favorite? }. scene picks the drawn cover (mountains, coast, desert, city, savanna, fjord, ruins) tinted with color; image replaces it. price is the per person from price; href is carried along for your own links (the card opens the detail sheet).

• destinationsdefault "TRAVEL_DESTINATIONS"
  TravelDestination[]

  { name, region, note?, scene, color, image? } tiles. The tour count and from price come from the tours whose destination matches the name; a destination without tours links to the custom trip form. An empty array hides the section.

• reviewsdefault "TRAVEL_REVIEWS"
  Testimonial[]

  Traveler quotes for the reviews grid (the TestimonialsSection shape, with rating).

• faqsdefault "TRAVEL_FAQS"
  FaqItem[]

  { question, answer } pairs for the FAQ; an empty array hides it.

• statsdefault "TRAVEL_STATS"
  StatsSectionItem[]

  { value, decimals?, prefix?, suffix?, label, description? } numbers for the stats section; an empty array hides it.

• gallerydefault "TRAVEL_GALLERY"
  TravelGalleryItem[]

  { id, caption, location, scene, color, image? } tiles of the gallery band; the first one is large from 768px.

• whydefault "TRAVEL_WHY"
  FeatureGridItem[]

  The Why travel with us cards: { icon, title, description } for the FeatureGrid.

• phonedefault "(303) 555-0142"
  string

  The office number in the header, the phone menu and the custom trip band (a tel: link); empty hides it.

• depositdefault 300
  number

  The deposit per traveler: the last hero point and the line under the total in the detail sheet; 0 hides both.

• datePresetsdefault "TRAVEL_DATE_PRESETS"
  DateRangePreset[]

  { label, value: { from, to } | () => range, key? } quick ranges beside the search calendar (chips above it on phones); an empty array hides them.

• labels
  Partial<TravelPageLabels>

  Every string on the page: the brand, the hero, the search, the section headings, the detail sheet, the form and its errors. The ones that take a count, a price or a name are functions (call, matches, dayCount, seatsLeft, tourCount, totalFor, deposit, reservedDescription, successDescription and more).

• currencydefault "USD"
  string

  ISO currency of every price, total, deposit and budget chip.

• localedefault ""
  string

  Intl locale for prices, dates and numbers; empty uses the UIProvider's, else en-US.

• onSearch
  (search: TravelSearch) => void

  Runs on Search and on a destination tile with { destination, dates: { from, to }, travelers }. The tours filter live either way; use it to fetch or to sync the URL.

• onReserve
  (reservation: TravelReservation) => void | Promise<unknown>

  Runs on Reserve your spot with { tour, departure, travelers, total }. A returned promise keeps the button loading; a rejection shows labels.reserveFailed in the sheet. Without it the page pretends for 900 ms, then confirms.

• onInquiry
  (values: TravelInquiryValues) => void | Promise<unknown>

  Runs on Send my trip ideas with { name, email, destination, season, travelers, budget, interests, notes }. A returned promise keeps the button loading; a rejection keeps the form and shows labels.failed. Without it the page pretends for 900 ms, then thanks.

• onFavoriteChange
  (tour: TravelTour, favorite: boolean) => void | Promise<unknown>

  Runs when a heart is pressed. A returned promise keeps the heart on while pending; a rejection rolls it back.

• featuredCountdefault 6
  number

  Tour cards shown from 768px before Show all; phones get every match in the rail.

• tonedefault "neutral"
  "neutral" | "brand" | "success" | "warning" | "danger" | "info"

  Accents: the stars, the chosen departure, the itinerary dots, the region, budget and interest chips, the date range selection and the stat numbers.

• ctaTonedefault "neutral"
  "neutral" | "brand" | "success" | "warning" | "danger" | "info"

  Search, Plan a trip, Reserve your spot, Send my trip ideas and the Find a tour bar.

• favoriteTonedefault "neutral"
  "neutral" | "brand" | "success" | "warning" | "danger" | "info"

  The heart on a saved tour; neutral is white on the cover.

• radiusdefault "lg"
  "none" | "sm" | "md" | "lg"

  Corners of the tour, destination, gallery and form cards: 0 / 12 / 16 / 24px; the covers inside follow.

• backgrounddefault "soft"
  "plain" | "soft" | "glow" | "aurora" | "grid" | "dots"

  The main background: plain is the bare page color; the others tint the page and add a wash, a glow, an aurora, a grid or dots over the first screen.

• backgroundColordefault "oklch(0.66 0.12 60)"
  string

  The tint of the main background, a warm sand by default.

• bandBackgrounddefault "muted"
  "muted" | "tinted" | "gradient" | "dots"

  The secondary background of every second section (destinations, stats, reviews and the custom trip form with all sections on). Cards and fields inside are lifted one step above it.

• bandColordefault "oklch(0.66 0.12 60)"
  string

  The tint of tinted and gradient bands; left equal to backgroundColor it follows it.

• showDestinationsdefault true
  boolean

  The destination tiles with the region chips (and their header link).

• showWhydefault true
  boolean

  The Why travel with us cards.

• showStatsdefault true
  boolean

  The stats section.

• showGallerydefault true
  boolean

  The gallery band of drawn travel moments.

• showReviewsdefault true
  boolean

  The reviews grid.

• showFaqdefault true
  boolean

  The FAQ with its contact card.

• showInquirydefault true
  boolean

  The Plan a custom trip band and form. Off, Plan a trip in the header calls the office and destinations without tours search instead.

• stickySearchBardefault true
  boolean

  The Find a tour bar pinned to the bottom of phones once the hero scrolls away.

• headerdefault true
  boolean

  The sticky header with the brand, the section links, the phone number and Plan a trip.

• footerdefault true
  boolean

  The footer with Tours, Travel and Company links and the seller of travel line.

• headerProps
  Partial<MarketingHeaderProps>

  Anything for MarketingHeader (layout, variant, items...); wins over the page's own values.

• footerProps
  Partial<MarketingFooterProps>

  Anything for MarketingFooter (variant, columns, socials, newsletter...).

• whyProps
  Partial<FeatureGridProps>

  Anything for the Why travel with us FeatureGrid (layout, columns, card...).

• statsProps
  Partial<StatsSectionProps>

  Anything for the StatsSection (variant, size, countUp...).

• reviewsProps
  Partial<TestimonialsSectionProps>

  Anything for the reviews TestimonialsSection (layout, columns, card...).

• faqProps
  Partial<FaqSectionProps>

  Anything for the FaqSection (layout, searchable, categories...).

• stickyBarProps
  Partial<StickyCtaBarProps>

  Anything for the Find a tour StickyCtaBar (variant, size, showOn...).

• animateIndefault true
  boolean

  The hero and the search rise in once when the page mounts on the client; never during hydration, under reduced motion or in thumbnails.

• linkComponent
  (props: LinkComponentProps) => ReactNode

  The router link for the header, footer, feature and FAQ links (next/link in an app).

• className
  string

  Classes for the root.

• classNames
  Partial<Record<TravelPageSlot, string>>

  Classes for header, hero, search, tours, tour, cover, detail, destinations, destination, why, stats, gallery, reviews, faq, inquiry, form, stickyBar and footer.

Parts

FAQ