Zum Inhalt springen
UI Kit
Accent

Reisen

Für Reiseveranstalter, Reisebüros und Guides. Reiseziele mit Reisezeit, eine Reise auf einen Blick, der Verlauf Tag für Tag, Termine mit Preisen und die Leistungen.

5 Variants
Kategorie wechseln

Reisen

Reiseziele

Ein redaktionelles Raster nach Regionen, die erste Reise breit. Jede Karte zeigt Nächte, Preis und die besten Monate als Balken, die hineinwachsen.

Im Studio öffnen

Reise auf einen Blick

Bilder mit Parallaxe und Vorschauen, vier Eckdaten mit dem Anspruch als Punkte, Höhepunkte, die aufsteigen, der Preis und zwei Aktionen.

Im Studio öffnen

Reiseverlauf

Tag für Tag auf einer Linie. Beim Lesen füllt die klebende Karte die Route bis zu diesem Tag, der Halt pulsiert.

Im Studio öffnen

Termine und Preise

Termine mit Verfügbarkeit, ausgebuchte bleiben mit Warteliste sichtbar. Einen wählen, Reisende und Einzelzimmer einstellen, die Summe gleitet mit.

Im Studio öffnen

Leistungen

Leistungen als Haarlinienraster, das aufsteigt, was nicht inklusive ist auf einer gestrichelten Karte, Zusatzbausteine, die den Reisepreis beim Anhaken erhöhen.

Im Studio öffnen

Details

Was Reisen mitbringt, aus Registry und Quellcode gelesen.

Bereich
Industries
Variants
5
Version
1.0.0 · seit 1.1.0
Datei
components/ui/travel.tsx
Bringt mit
utilskitbuttoniconrevealsectionmotion
npm-Pakete
Keine
Sprachen
Englisch und Deutsch, 43 eigene Texte
Studio
Alle 5 Variants bearbeitbar
Mit KI bauen
Per MCP in Claude, Cursor, Copilot und Codex

Props

Die Schnittstelle TravelProps aus components/ui/travel.tsx. Beschreibungen stammen aus den Kommentaren im Code und sind auf Englisch.

  • 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

Eingebaute Texte

Diese Texte schreibt Reisen selbst. Die Sprache folgt dem KitProvider, über die Prop labels ersetzt du einzelne.

Alle 43 Texte anzeigen
regionsEnglisch RegionsDeutsch Regionen
allEnglisch AllDeutsch Alle
fromEnglisch from {price}Deutsch ab {price}
nightsEnglisch {n} nightsDeutsch {n} Nächte
seasonEnglisch Best time to travelDeutsch Beste Reisezeit
monthsEnglisch J,F,M,A,M,J,J,A,S,O,N,DDeutsch J,F,M,A,M,J,J,A,S,O,N,D
monthsLongEnglisch January,February,March,April,May,June,July,August,September,October,November,DecemberDeutsch Januar,Februar,März,April,Mai,Juni,Juli,August,September,Oktober,November,Dezember
dayEnglisch Day {n}Deutsch Tag {n}
stayEnglisch NightDeutsch Übernachtung
mealsEnglisch MealsDeutsch Verpflegung
distanceEnglisch On the roadDeutsch Unterwegs
routeEnglisch RouteDeutsch Route
departuresEnglisch DeparturesDeutsch Termine
datesEnglisch DatesDeutsch Reisezeitraum
priceEnglisch Price per personDeutsch Preis pro Person
statusEnglisch AvailabilityDeutsch Verfügbarkeit
guaranteedEnglisch GuaranteedDeutsch Durchführung garantiert
seatsEnglisch {n} seats leftDeutsch Noch {n} Plätze
fewEnglisch Only {n} leftDeutsch Nur noch {n}
soldOutEnglisch Fully bookedDeutsch Ausgebucht
waitlistEnglisch Waiting listDeutsch Warteliste
pickEnglisch ChooseDeutsch Wählen
pickedEnglisch ChosenDeutsch Gewählt
travellersEnglisch TravellersDeutsch Reisende
fewerEnglisch One lessDeutsch Eine Person weniger
moreEnglisch One moreDeutsch Eine Person mehr
singleEnglisch Single roomDeutsch Einzelzimmer
singleNEnglisch plus {price} per personDeutsch zzgl. {price} pro Person
totalEnglisch TotalDeutsch Gesamt
bookEnglisch Book this departureDeutsch Diesen Termin buchen
pickFirstEnglisch Choose a departureDeutsch Termin wählen
includedEnglisch IncludedDeutsch Inklusive
notIncludedEnglisch Not includedDeutsch Nicht inklusive
extrasEnglisch Add to your tripDeutsch Dazu buchen
tripPriceEnglisch Trip price per personDeutsch Reisepreis pro Person
durationEnglisch DurationDeutsch Dauer
groupEnglisch Group sizeDeutsch Gruppengröße
levelEnglisch Activity levelDeutsch Anspruch
levelNEnglisch {n} of 5Deutsch {n} von 5
stayTypeEnglisch StaysDeutsch Unterkünfte
highlightsEnglisch HighlightsDeutsch Höhepunkte
seeDatesEnglisch See dates and pricesDeutsch Termine und Preise ansehen
downloadEnglisch Download itineraryDeutsch Reiseverlauf herunterladen

Barrierefreiheit

Aus dem Quellcode der Component abgeleitet.

  • Reisen reagiert selbst auf die Tasten Pfeil hoch, Pfeil runter, Pfeil links, Pfeil rechts und Leertaste.
  • Setzt aria-checked, aria-disabled, aria-label, aria-live und aria-pressed, damit Screenreader Zweck und Zustand ansagen.
  • Nutzt die Rollen group, radio und radiogroup.
  • Meldet Änderungen über eine Live-Region, ohne den Fokus zu verschieben.
  • Jedes Feld hat ein Label, sichtbar oder für Screenreader.
  • Ergänzt Text für Screenreader, wo Icons und Grafiken allein stehen.
  • Zeigt bei Bedienung mit der Tastatur einen sichtbaren Fokusring.
  • Der Server rendert den Startzustand vollständig, JavaScript ergänzt nur die Interaktion.

Bewegung

  • Erscheint beim ersten Sichtkontakt mit einem kurzen Auftritt (kit-rise, useInView).
  • Bewegt sich mit dem Scrollen, der Fortschritt folgt der Position auf der Seite.
  • Bringt eigene Animationen mit, ruhig getaktet und ohne Wackeln.
  • Bei reduzierter Bewegung (prefers-reduced-motion) bleibt sie ruhig. 3 Stellen im Code schalten Bewegung dann ab.

Häufige Fragen

Wie installiere ich Reisen?

Mit aiw add @ai-website/travel. Der Befehl legt die Datei components/ui/travel.tsx in dein Projekt, der Code gehört danach dir. Mit dabei sind button, icon, reveal, section und motion. Weitere npm-Pakete braucht sie nicht.

Welche Varianten hat Reisen?

5 Varianten, Reiseziele, Reise auf einen Blick, Reiseverlauf, Termine und Preise und Leistungen. Du wählst sie mit der Prop variant, zum Beispiel variant="overview".

Kann ich die Texte von Reisen übersetzen?

Ja. Reisen bringt 43 eigene Texte auf Deutsch und Englisch mit, etwa „Regionen“, „Alle“ und „Beste Reisezeit“. Die Sprache folgt dem KitProvider, einzelne Texte ersetzt du über die Prop labels.

Kann ein KI-Assistent Reisen einbauen?

Ja. Über den MCP-Server der aiw CLI finden Claude, Cursor, GitHub Copilot, Windsurf, Codex und Gemini Reisen mit aiw_components und installieren sie mit aiw_add @ai-website/travel. Nenn im Prompt die Variante, etwa variant="destinations", dann schreibt der Assistent deine Inhalte direkt in die Props.

Kann ich Reisen ohne Code anpassen?

Ja, im Studio. Alle 5 Varianten lassen sich dort bearbeiten, Texte, Listen und Schalter. Das Studio schreibt den passenden Travel-Code zum Kopieren.

Ähnliche Components

Mehr aus Industries, demselben Bereich des Kits.

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben Reisen stehen.

Oft gesucht

Direkt zu

In die Zwischenablage kopiert