Hotel website sections

For hotels, guest houses and boutique stays. The house as a drawn cross section, rates with cancellation terms, packages day by day and online check-in with a digital key.

4 variants

Switch category

From the first look to the room key

A hotel website sells a stay before it sells a room. These sections take guests from the house itself to the rate, the package and the arrival, each with its own calm layout on the phone, where most stays are planned.

The house shows the hotel as a drawn cross section whose floors rise in while scrolling, pointing at a floor swaps in its opening hours and features. Rate plans lets guests pick a room, then a rate with perks and cancellation terms, the total follows the nights and the button names the price. Packages lists arrangements with nights and price per person, the chosen one unfolds day by day on a timeline. Online check-in asks arrival time, parking, wishes and contact in three short steps and ends with a digital room key.

Put the cancellation terms right next to each rate, that is where guests decide between flexible and cheaper. Packages work best with three to five offers and a clear price per person. Send the check-in link a few days before arrival, then the front desk simply hands over the key.

The houseNew in 1.2

The hotel as a drawn cross section, the floors rise in one after another while scrolling. Point at a floor or pick it below, its opening hours and features swap in.

Installv1.0.0

aiw add @ai-website/hotel

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

Usage

<Hotel variant="house" floors={[{ id, name, level: "5", kind: "roof", text, hours: [{ label, from: "17:00", to: "23:00" }], features }]} />

Source

Rate plansNew in 1.2

Pick a room, then a rate with its perks and cancellation terms, the best price carries a badge. Set the nights, the total glides along and the button names the price.

Installv1.0.0

aiw add @ai-website/hotel

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

Usage

<Hotel variant="rate-plans" rooms={[{ id, name, size, guests, beds, prices: { flex: 189 }, media }]} rates={[{ id: "flex", name, perks, cancel, refundable: true }]} />

Source

PackagesNew in 1.2

Arrangements with nights and the price per person. Pick one and the stay unfolds day by day on a timeline that draws itself while scrolling, with what is included above it.

Installv1.0.0

aiw add @ai-website/hotel

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

Usage

<Hotel variant="packages" packages={[{ id, title, nights: 2, price: 389, text, includes, days: [{ label, items: [{ time: "15:00", text }] }], media }]} />

Source

Online check-inNew in 1.2

Three short steps with a progress line, arrival time, parking, wishes and contact. Missing fields say what they need. At the end the booking card turns into a room key.

Installv1.0.0

aiw add @ai-website/hotel

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

Usage

<Hotel variant="pre-check-in" booking={{ number, guest, room, from, to }} arrivalSlots={["14:00", "16:00"]} requests={[{ id, label, icon }]} />

Source

Details

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

Area: Industries
Variants: 4
Version: 1.0.0 · since 1.2.0
File: components/ui/hotel.tsx
Brings along: utilskitbutton iconsectionmotion
npm packages: None
Languages: English and German, 51 texts of its own
Studio: Adjust in code
Build with AI: Over MCP in Claude, Cursor, Copilot and Codex

Props

The HotelProps interface from components/ui/hotel.tsx, with the comments from the code.

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

Built-in texts

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

Show all 51 texts

Key	English	German
floors	English Floors	German Etagen
level	English Level {n}	German Etage {n}
open	English Opening hours	German Öffnungszeiten
room	English Room	German Zimmer
rate	English Rate	German Rate
sizeGuests	English {size} m² · up to {n} guests	German {size} m² · bis {n} Gäste
perNight	English per night	German pro Nacht
nights	English Nights	German Nächte
oneNight	English One night less	German Eine Nacht weniger
moreNight	English One night more	German Eine Nacht mehr
nightsN	English {n} nights	German {n} Nächte
nightsOne	English 1 night	German 1 Nacht
total	English Total stay	German Gesamter Aufenthalt
taxes	English Including VAT and breakfast where listed	German Inklusive MwSt. und Frühstück, wo angegeben
reserve	English Reserve for {price}	German Für {price} reservieren
reserved	English Reserved. Your confirmation is on its way.	German Reserviert. Deine Bestätigung ist unterwegs.
refundable	English Free cancellation	German Kostenlos stornierbar
fixed	English Best price	German Bester Preis
from	English from	German ab
perPerson	English per person	German pro Person
includes	English Included	German Inklusive
itinerary	English Your stay, day by day	German Dein Aufenthalt, Tag für Tag
book	English Request this package	German Paket anfragen
requested	English Request sent. We will reply within a day with dates that fit.	German Anfrage gesendet. Wir melden uns innerhalb eines Tages mit passenden Terminen.
choose	English Package	German Paket
stepArrival	English Arrival	German Anreise
stepWishes	English Wishes	German Wünsche
stepContact	English Contact	German Kontakt
arrivalTime	English When do you arrive?	German Wann kommst du an?
parking	English I need a parking space	German Ich brauche einen Parkplatz
parkingHint	English Garage under the house, one space per room	German Tiefgarage im Haus, ein Platz pro Zimmer
wishes	English Anything we can prepare?	German Was dürfen wir vorbereiten?
note	English A note for the front desk	German Eine Notiz an die Rezeption
notePh	English Late dinner, an anniversary, a feather-free pillow …	German Spätes Abendessen, ein Jahrestag, ein Kissen ohne Federn …
name	English Full name	German Vor- und Nachname
email	English Email	German E-Mail
terms	English I confirm the details of my stay	German Ich bestätige die Angaben zu meinem Aufenthalt
next	English Continue	German Weiter
back	English Back	German Zurück
send	English Check in online	German Online einchecken
required	English Please fill in this field	German Bitte fülle dieses Feld aus
emailInvalid	English Please enter a valid email address	German Bitte gib eine gültige E-Mail-Adresse ein
termsMissing	English Please confirm the details	German Bitte bestätige die Angaben
doneTitle	English You are checked in	German Du bist eingecheckt
doneText	English Your room key is ready on arrival, skip the queue and head straight up.	German Dein Zimmerschlüssel liegt bei Ankunft bereit, an der Schlange vorbei direkt aufs Zimmer.
booking	English Booking	German Buchung
number	English Booking number	German Buchungsnummer
guest	English Guest	German Gast
stay	English Stay	German Aufenthalt
key	English Room key	German Zimmerschlüssel
step	English Step {n} of {total}	German Schritt {n} von {total}

Read from the source of the component.

Hotel handles the keys Arrow up, Arrow down, Arrow left and Arrow right itself.
Sets aria-checked, aria-current, aria-describedby, aria-invalid, aria-label, aria-live and aria-pressed, so screen readers announce purpose and state.
Uses the roles radio, radiogroup and status.
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

Brings animations of its own, calmly timed and without wobble.
With reduced motion (prefers-reduced-motion) it stays still. 4 places in the code switch motion off then.

Frequent questions

How do I install Hotel?

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

Which variants does Hotel have?

4 variants, The house, Rate plans, Packages and Online check-in. You pick one with the variant prop, for example variant="rate-plans".

Can I translate the texts of Hotel?

Yes. Hotel carries 51 texts of its own in English and German, such as “Floors”, “Opening hours” and “Room”. The language follows the KitProvider, single texts change through the labels prop.

Can an AI assistant build with Hotel?

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

Similar components

More from Industries, the same area of the kit.

Often combined with

Sections that usually sit next to Hotel on a page.

From the first look to the room key

Hotel

The houseNew in 1.2

Rate plansNew in 1.2

PackagesNew in 1.2

Online check-inNew in 1.2

Details

Props

Built-in texts

Accessibility

Motion

Frequent questions

Similar components, Often combined with

Similar components

Often combined with