Travel

For tour operators, travel agencies and guides. Destinations with seasons, a trip at a glance, the itinerary day by day, departures with prices and what is included.

5 variants

Switch category

Destinations

An editorial grid by region, the first trip wide. Each card shows nights, the price and the best months as bars that grow in.

Open in Studio

Installv1.0.0

aiw add @ai-website/travel

Brings along utils, kit, button, icon, reveal, section, motion

Usage

<Travel variant="destinations" destinations={[{ id, name, country, region, price, nights, season: [6, 7, 8], image, href }]} />

Source

Trip overview

Pictures with parallax and thumbnails, four facts with the activity level as dots, highlights that rise in, the price and two actions.

Open in Studio

Installv1.0.0

aiw add @ai-website/travel

Brings along utils, kit, button, icon, reveal, section, motion

Usage

<Travel variant="overview" trip={{ name, nights, group, level, stays, price, highlights, image, gallery }} />

Source

Itinerary

Day by day on a line. While you read, the sticky map fills the route up to that day and the stop pulses.

Open in Studio

Installv1.0.0

aiw add @ai-website/travel

Brings along utils, kit, button, icon, reveal, section, motion

Usage

<Travel variant="itinerary" map={<img … />} days={[{ day: "1", title, text, stay, meals, distance, point: [12, 78] }]} />

Source

Dates and prices

Departures with availability, sold out ones stay visible with a waiting list. Pick one, set travellers and a single room, the total glides.

Open in Studio

Installv1.0.0

aiw add @ai-website/travel

Brings along utils, kit, button, icon, reveal, section, motion

Usage

<Travel variant="dates-prices" departures={[{ id, start, end, price, seats, guaranteed, note }]} singleSupplement={390} onBook={(d) => …} />

Source

What is included

Included services as a hairline grid that rises in, what is not included on a dashed card, extras that add to the trip price as you tick them.

Open in Studio

Installv1.0.0

aiw add @ai-website/travel

Brings along utils, kit, button, icon, reveal, section, motion

Usage

<Travel variant="included" included={[{ icon, title, text }]} notIncluded={[…]} extras={[{ id, title, text, price }]} basePrice={2290} />

Source

Details

What Travel brings along, read from the registry and the source.

Area: Industries
Variants: 5
Version: 1.0.0 · since 1.1.0
File: components/ui/travel.tsx
Brings along: utilskitbutton iconrevealsectionmotion
npm packages: None
Languages: English and German, 43 texts of its own
Studio: All 5 variants editable
Build with AI: Over MCP in Claude, Cursor, Copilot and Codex

Props

The TravelProps interface from components/ui/travel.tsx, with the comments from the code.

variantoptional
TravelVariant
destinationsoverviewitinerarydates-pricesincluded
eyebrowoptional
React.ReactNode
titleoptional
React.ReactNode
descriptionoptional
React.ReactNode
destinationsoptional
TravelDestination[]
daysoptional
TravelDay[]
mapoptional
React.ReactNode
itinerary: a route drawing behind the stops, e.g. a map
departuresoptional
TravelDeparture[]
singleSupplementoptional
number
dates-prices: the single room supplement per person
includedoptional
{ icon?: IconName; title: string; text?: string }[]
notIncludedoptional
string[]
extrasoptional
{ id: string; title: string; text?: string; price: number }[]
basePriceoptional
number
included: the base price per person the extras add to
tripoptional
{ name: string; nights: number; group: string; level: number; stays: string; price: number; highlights: string[]; image?: React.ReactNode; gallery?: React.ReactNode[]; }
overview: the facts of one trip
currencyoptional
string
onBookoptional
(data: Record<string, string>) => void
linksoptional
{ dates?: string }
Where the jumps go, sections of the same page by default: #dates

Built-in texts

Travel writes these texts itself. The language follows the KitProvider, the labels prop replaces single ones.

Show all 43 texts

Key	English	German
regions	English Regions	German Regionen
all	English All	German Alle
from	English from {price}	German ab {price}
nights	English {n} nights	German {n} Nächte
season	English Best time to travel	German Beste Reisezeit
months	English J,F,M,A,M,J,J,A,S,O,N,D	German J,F,M,A,M,J,J,A,S,O,N,D
monthsLong	English January,February,March,April,May,June,July,August,September,October,November,December	German Januar,Februar,März,April,Mai,Juni,Juli,August,September,Oktober,November,Dezember
day	English Day {n}	German Tag {n}
stay	English Night	German Übernachtung
meals	English Meals	German Verpflegung
distance	English On the road	German Unterwegs
route	English Route	German Route
departures	English Departures	German Termine
dates	English Dates	German Reisezeitraum
price	English Price per person	German Preis pro Person
status	English Availability	German Verfügbarkeit
guaranteed	English Guaranteed	German Durchführung garantiert
seats	English {n} seats left	German Noch {n} Plätze
few	English Only {n} left	German Nur noch {n}
soldOut	English Fully booked	German Ausgebucht
waitlist	English Waiting list	German Warteliste
pick	English Choose	German Wählen
picked	English Chosen	German Gewählt
travellers	English Travellers	German Reisende
fewer	English One less	German Eine Person weniger
more	English One more	German Eine Person mehr
single	English Single room	German Einzelzimmer
singleN	English plus {price} per person	German zzgl. {price} pro Person
total	English Total	German Gesamt
book	English Book this departure	German Diesen Termin buchen
pickFirst	English Choose a departure	German Termin wählen
included	English Included	German Inklusive
notIncluded	English Not included	German Nicht inklusive
extras	English Add to your trip	German Dazu buchen
tripPrice	English Trip price per person	German Reisepreis pro Person
duration	English Duration	German Dauer
group	English Group size	German Gruppengröße
level	English Activity level	German Anspruch
levelN	English {n} of 5	German {n} von 5
stayType	English Stays	German Unterkünfte
highlights	English Highlights	German Höhepunkte
seeDates	English See dates and prices	German Termine und Preise ansehen
download	English Download itinerary	German Reiseverlauf herunterladen

Read from the source of the component.

Travel handles the keys Arrow up, Arrow down, Arrow left, Arrow right and Space itself.
Sets aria-checked, aria-disabled, aria-label, aria-live and aria-pressed, so screen readers announce purpose and state.
Uses the roles group, radio and radiogroup.
Announces changes through a live region without moving focus.
Every field has a label, visible or for screen readers.
Adds text for screen readers where icons and graphics stand alone.
Shows a visible focus ring when used with the keyboard.
The server renders the starting state in full, JavaScript only adds the interaction.

Motion

Rises in briefly the first time it comes into view (kit-rise, useInView).
Moves with the scroll, its progress follows the position on the page.
Brings animations of its own, calmly timed and without wobble.
With reduced motion (prefers-reduced-motion) it stays still. 3 places in the code switch motion off then.

Frequent questions

How do I install Travel?

With aiw add @ai-website/travel. The command puts components/ui/travel.tsx into your project, the code is yours from then on. It brings along button, icon, reveal, section and motion. It needs no further npm packages.

Which variants does Travel have?

5 variants, Destinations, Trip overview, Itinerary, Dates and prices and What is included. You pick one with the variant prop, for example variant="overview".

Can I translate the texts of Travel?

Yes. Travel carries 43 texts of its own in English and German, such as “Regions”, “All” and “Best time to travel”. The language follows the KitProvider, single texts change through the labels prop.

Can an AI assistant build with Travel?

Yes. Through the MCP server of the aiw CLI, Claude, Cursor, GitHub Copilot, Windsurf, Codex and Gemini find Travel with aiw_components and install it with aiw_add @ai-website/travel. Name the variant in your prompt, for example variant="destinations", and the assistant writes your content straight into the props.

Can I adjust Travel without code?

Yes, in the Studio. All 5 variants are editable there, texts, lists and switches. The Studio writes the matching Travel code to copy.

Similar components

More from Industries, the same area of the kit.

Often combined with

Sections that usually sit next to Travel on a page.

Travel

Destinations

Trip overview

Itinerary

Dates and prices

What is included

Details

Props

Built-in texts

Accessibility

Motion

Frequent questions

Similar components, Often combined with

Similar components

Often combined with