Zum Inhalt springen
UI Kit
Accent

Hotel Website Sections

Für Hotels, Gasthöfe und Boutique-Häuser. Das Haus als gezeichneter Schnitt, Raten mit Stornobedingungen, Pakete Tag für Tag und Online-Check-in mit digitalem Schlüssel.

4 Variants
Kategorie wechseln

Vom ersten Blick bis zum Zimmerschlüssel

Eine Hotel-Website verkauft einen Aufenthalt, bevor sie ein Zimmer verkauft. Diese Sections führen Gäste vom Haus über die Rate und das Arrangement bis zur Anreise, jede mit eigenem ruhigem Layout fürs Handy, wo die meisten Aufenthalte geplant werden.

„Das Haus“ zeigt das Hotel als gezeichneten Querschnitt, dessen Etagen beim Scrollen nacheinander erscheinen, zeigt man auf eine Etage, kommen ihre Öffnungszeiten und ihre Ausstattung herein. „Raten“ lässt Gäste ein Zimmer und dann eine Rate mit Leistungen und Stornobedingungen wählen, die Summe folgt den Nächten und der Knopf nennt den Preis. „Arrangements“ listet Pakete mit Nächten und Preis pro Person, das gewählte entfaltet sich Tag für Tag auf einem Zeitstrahl. Der „Online-Check-in“ fragt in drei kurzen Schritten Ankunftszeit, Parkplatz, Wünsche und Kontakt ab und endet mit einem digitalen Zimmerschlüssel.

Stell die Stornobedingungen direkt neben jede Rate, dort entscheiden Gäste zwischen flexibel und günstiger. Arrangements wirken mit drei bis fünf Angeboten und einem klaren Preis pro Person am besten. Verschick den Check-in-Link ein paar Tage vor Anreise, dann übergibt die Rezeption nur noch den Schlüssel.

Hotel

Das HausNeu in 1.2

Das Hotel als gezeichneter Schnitt, die Etagen bauen sich beim Scrollen nacheinander auf. Auf eine Etage zeigen oder unten wählen, Öffnungszeiten und Ausstattung wechseln.

RatenNeu in 1.2

Ein Zimmer wählen, dann eine Rate mit Leistungen und Stornobedingungen, der beste Preis trägt ein Abzeichen. Nächte einstellen, die Summe gleitet mit, der Knopf nennt den Preis.

ArrangementsNeu in 1.2

Arrangements mit Nächten und Preis pro Person. Eines wählen, der Aufenthalt entfaltet sich Tag für Tag auf einem Zeitstrahl, der sich beim Scrollen zeichnet, darüber, was inklusive ist.

Online-Check-inNeu in 1.2

Drei kurze Schritte mit Fortschrittslinie, Ankunftszeit, Parkplatz, Wünsche und Kontakt. Fehlende Felder sagen, was sie brauchen. Am Ende wird die Buchungskarte zum Zimmerschlüssel.

Details

Was Hotel mitbringt, aus Registry und Quellcode gelesen.

Bereich
Industries
Variants
4
Version
1.0.0 · seit 1.2.0
Datei
components/ui/hotel.tsx
Bringt mit
utilskitbuttoniconsectionmotion
npm-Pakete
Keine
Sprachen
Englisch und Deutsch, 51 eigene Texte
Studio
Im Code anpassen

Props

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

  • variantoptional
    HotelVariant

    houserate-planspackagespre-check-in

  • eyebrowoptional
    React.ReactNode
  • titleoptional
    React.ReactNode
  • descriptionoptional
    React.ReactNode
  • floorsoptional
    HotelFloor[]

    house: floors from top to bottom, a spa floor sits below ground

  • ratesoptional
    HotelRate[]

    rate-plans

  • roomsoptional
    HotelRoomType[]
  • packagesoptional
    HotelPackage[]

    packages

  • bookingoptional
    HotelBooking

    pre-check-in

  • arrivalSlotsoptional
    string[]

    pre-check-in: arrival times as "HH:MM"

  • requestsoptional
    { id: string; label: string; icon?: IconName }[]

    pre-check-in: wishes to tick

  • currencyoptional
    string

Eingebaute Texte

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

Alle 51 Texte anzeigen
floorsEnglisch FloorsDeutsch Etagen
levelEnglisch Level {n}Deutsch Etage {n}
openEnglisch Opening hoursDeutsch Öffnungszeiten
roomEnglisch RoomDeutsch Zimmer
rateEnglisch RateDeutsch Rate
sizeGuestsEnglisch {size} m² · up to {n} guestsDeutsch {size} m² · bis {n} Gäste
perNightEnglisch per nightDeutsch pro Nacht
nightsEnglisch NightsDeutsch Nächte
oneNightEnglisch One night lessDeutsch Eine Nacht weniger
moreNightEnglisch One night moreDeutsch Eine Nacht mehr
nightsNEnglisch {n} nightsDeutsch {n} Nächte
nightsOneEnglisch 1 nightDeutsch 1 Nacht
totalEnglisch Total stayDeutsch Gesamter Aufenthalt
taxesEnglisch Including VAT and breakfast where listedDeutsch Inklusive MwSt. und Frühstück, wo angegeben
reserveEnglisch Reserve for {price}Deutsch Für {price} reservieren
reservedEnglisch Reserved. Your confirmation is on its way.Deutsch Reserviert. Deine Bestätigung ist unterwegs.
refundableEnglisch Free cancellationDeutsch Kostenlos stornierbar
fixedEnglisch Best priceDeutsch Bester Preis
fromEnglisch fromDeutsch ab
perPersonEnglisch per personDeutsch pro Person
includesEnglisch IncludedDeutsch Inklusive
itineraryEnglisch Your stay, day by dayDeutsch Dein Aufenthalt, Tag für Tag
bookEnglisch Request this packageDeutsch Paket anfragen
requestedEnglisch Request sent. We will reply within a day with dates that fit.Deutsch Anfrage gesendet. Wir melden uns innerhalb eines Tages mit passenden Terminen.
chooseEnglisch PackageDeutsch Paket
stepArrivalEnglisch ArrivalDeutsch Anreise
stepWishesEnglisch WishesDeutsch Wünsche
stepContactEnglisch ContactDeutsch Kontakt
arrivalTimeEnglisch When do you arrive?Deutsch Wann kommst du an?
parkingEnglisch I need a parking spaceDeutsch Ich brauche einen Parkplatz
parkingHintEnglisch Garage under the house, one space per roomDeutsch Tiefgarage im Haus, ein Platz pro Zimmer
wishesEnglisch Anything we can prepare?Deutsch Was dürfen wir vorbereiten?
noteEnglisch A note for the front deskDeutsch Eine Notiz an die Rezeption
notePhEnglisch Late dinner, an anniversary, a feather-free pillow …Deutsch Spätes Abendessen, ein Jahrestag, ein Kissen ohne Federn …
nameEnglisch Full nameDeutsch Vor- und Nachname
emailEnglisch EmailDeutsch E-Mail
termsEnglisch I confirm the details of my stayDeutsch Ich bestätige die Angaben zu meinem Aufenthalt
nextEnglisch ContinueDeutsch Weiter
backEnglisch BackDeutsch Zurück
sendEnglisch Check in onlineDeutsch Online einchecken
requiredEnglisch Please fill in this fieldDeutsch Bitte fülle dieses Feld aus
emailInvalidEnglisch Please enter a valid email addressDeutsch Bitte gib eine gültige E-Mail-Adresse ein
termsMissingEnglisch Please confirm the detailsDeutsch Bitte bestätige die Angaben
doneTitleEnglisch You are checked inDeutsch Du bist eingecheckt
doneTextEnglisch Your room key is ready on arrival, skip the queue and head straight up.Deutsch Dein Zimmerschlüssel liegt bei Ankunft bereit, an der Schlange vorbei direkt aufs Zimmer.
bookingEnglisch BookingDeutsch Buchung
numberEnglisch Booking numberDeutsch Buchungsnummer
guestEnglisch GuestDeutsch Gast
stayEnglisch StayDeutsch Aufenthalt
keyEnglisch Room keyDeutsch Zimmerschlüssel
stepEnglisch Step {n} of {total}Deutsch Schritt {n} von {total}

Barrierefreiheit

Aus dem Quellcode der Component abgeleitet.

  • Hotel reagiert selbst auf die Tasten Pfeil hoch, Pfeil runter, Pfeil links und Pfeil rechts.
  • Setzt aria-checked, aria-current, aria-describedby, aria-invalid, aria-label, aria-live und aria-pressed, damit Screenreader Zweck und Zustand ansagen.
  • Nutzt die Rollen radio, radiogroup und status.
  • 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

  • Bringt eigene Animationen mit, ruhig getaktet und ohne Wackeln.
  • Bei reduzierter Bewegung (prefers-reduced-motion) bleibt sie ruhig. 4 Stellen im Code schalten Bewegung dann ab.

Häufige Fragen

Wie installiere ich Hotel?

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

Welche Varianten hat Hotel?

4 Varianten, Das Haus, Raten, Arrangements und Online-Check-in. Du wählst sie mit der Prop variant, zum Beispiel variant="rate-plans".

Kann ich die Texte von Hotel übersetzen?

Ja. Hotel bringt 51 eigene Texte auf Deutsch und Englisch mit, etwa „Etagen“, „Öffnungszeiten“ und „Zimmer“. Die Sprache folgt dem KitProvider, einzelne Texte ersetzt du über die Prop labels.

Kann ein KI-Assistent Hotel einbauen?

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

Oft gesucht

Direkt zu

In die Zwischenablage kopiert