Skip to content
UI Kit
Accent color

Rooms and stays

Rooms with amenities and price per night, an availability calendar, a booking bar, location and reviews.

5 variants
Switch category

Rooms and stays

Room cards

One wide card per room: photo, size, guests, beds, amenities and price per night.

Availability calendar

Two months with the price of each night, pick arrival and departure, the total follows.

Booking bar

A large photo with a bar for arrival, departure and guests, adults and children apart.

Location and surroundings

A map with the house in the middle, how to get here and what is nearby with travel times.

Guest reviews

The overall score with categories, guest reviews with stay date and replies.

Details

What Rooms and stays brings along, read from the registry and the source.

Area
Industries
Variants
5
Version
1.0.1 · since 1.0.0
File
components/ui/rooms.tsx
Brings along
utilskitbuttoniconsectionreveal
npm packages
None
Languages
English and German, 63 texts of its own
Studio
Adjust in code
Build with AI
Over MCP in Claude, Cursor, Copilot and Codex

Props

The RoomsProps interface from components/ui/rooms.tsx, with the comments from the code.

  • variantoptional
    RoomsVariant

    room-cardsavailabilitybooking-barlocationreviews

  • eyebrowoptional
    React.ReactNode
  • titleoptional
    React.ReactNode
  • descriptionoptional
    React.ReactNode
  • roomsoptional
    Room[]
  • pricesoptional
    Record<string, number | null>

    availability: nightly prices by ISO date, null when booked. Days without an entry are not bookable.

  • monthoptional
    string

    availability: first month shown, ISO like 2026-11-01

  • minNightsoptional
    number
  • mediaoptional
    React.ReactNode

    booking-bar, location: picture or map

  • arrivaloptional
    string

    booking-bar: default dates

  • departureoptional
    string
  • maxGuestsoptional
    number
  • addressoptional
    string[]

    location

  • arrivalNotesoptional
    { icon: IconName; title: string; text: string }[]
  • placesoptional
    { title: string; icon: IconName; items: RoomPlace[] }[]
  • scoreoptional
    number

    reviews

  • countoptional
    number
  • categoriesoptional
    { label: string; value: number }[]
  • reviewsoptional
    RoomReview[]
  • currencyoptional
    string
  • onReserveoptional
    (r: { room?: string; arrival?: string; departure?: string; adults?: number; children?: number }) => void

Built-in texts

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

Show all 63 texts
perNightEnglish / nightGerman / Nacht
guestsNEnglish Up to {n} guestsGerman Bis {n} Gäste
sqmEnglish {n} m²German {n} m²
leftNEnglish Only {n} leftGerman Nur noch {n} frei
chooseEnglish Choose roomGerman Zimmer wählen
chosenEnglish ChosenGerman Gewählt
amenitiesEnglish AmenitiesGerman Ausstattung
moreEnglish +{n} moreGerman +{n} weitere
wifiEnglish Wi-FiGerman WLAN
breakfastEnglish BreakfastGerman Frühstück
parkingEnglish ParkingGerman Parkplatz
balconyEnglish BalconyGerman Balkon
bathEnglish BathtubGerman Badewanne
kitchenEnglish KitchenetteGerman Kochnische
petsEnglish Pets welcomeGerman Hunde willkommen
saunaEnglish SaunaGerman Sauna
airconEnglish Air conditioningGerman Klimaanlage
workspaceEnglish DeskGerman Schreibtisch
coffeeEnglish Coffee machineGerman Kaffeemaschine
viewEnglish ViewGerman Aussicht
prevMonthEnglish Previous monthGerman Vorheriger Monat
nextMonthEnglish Next monthGerman Nächster Monat
arrivalEnglish ArrivalGerman Anreise
departureEnglish DepartureGerman Abreise
pickArrivalEnglish Pick your arrivalGerman Wähle deine Anreise
pickDepartureEnglish Now pick your departureGerman Jetzt die Abreise wählen
nightsNEnglish {n} nightsGerman {n} Nächte
nightEnglish 1 nightGerman 1 Nacht
bookedEnglish BookedGerman Belegt
minNightsEnglish At least {n} nightsGerman Mindestens {n} Nächte
totalEnglish TotalGerman Gesamt
reserveEnglish ReserveGerman Reservieren
clearEnglish Clear datesGerman Daten löschen
guestsEnglish GuestsGerman Gäste
adultsEnglish AdultsGerman Erwachsene
adultsHintEnglish From 13 yearsGerman Ab 13 Jahren
childrenEnglish ChildrenGerman Kinder
childrenHintEnglish Up to 12 yearsGerman Bis 12 Jahre
adultsNEnglish {n} adultsGerman {n} Erwachsene
adultEnglish 1 adultGerman 1 Erwachsener
childrenNEnglish {n} childrenGerman {n} Kinder
childEnglish 1 childGerman 1 Kind
fewerEnglish FewerGerman Weniger
more2English MoreGerman Mehr
checkEnglish Check availabilityGerman Verfügbarkeit prüfen
resultEnglish {nights} for {guests}, rooms are free. We show you the prices next.German {nights} für {guests}, es sind Zimmer frei. Als Nächstes zeigen wir dir die Preise.
datesErrorEnglish Departure must be after arrival.German Die Abreise muss nach der Anreise liegen.
getThereEnglish Getting hereGerman Anreise
nearbyEnglish NearbyGerman In der Nähe
walkEnglish on footGerman zu Fuß
bikeEnglish by bikeGerman mit dem Rad
carEnglish by carGerman mit dem Auto
trainEnglish by trainGerman mit der Bahn
directionsEnglish DirectionsGerman Route planen
outOfEnglish out of 10German von 10
reviewsNEnglish {n} reviewsGerman {n} Bewertungen
stayedEnglish Stayed in {date}German Aufenthalt im {date}
replyEnglish Reply from the houseGerman Antwort des Hauses
exceptionalEnglish ExceptionalGerman Herausragend
excellentEnglish ExcellentGerman Hervorragend
veryGoodEnglish Very goodGerman Sehr gut
goodEnglish GoodGerman Gut
showAllEnglish Show all reviewsGerman Alle Bewertungen zeigen

Accessibility

Read from the source of the component.

  • Rooms and stays handles the keys Escape itself.
  • Sets aria-controls, aria-current, aria-expanded, aria-invalid, aria-label, aria-live and aria-pressed, so screen readers announce purpose and state.
  • Uses the roles grid, group 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

  • Rises in briefly the first time it comes into view (kit-rise, useInView).
  • 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 Rooms and stays?

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

Which variants does Rooms and stays have?

5 variants, Room cards, Availability calendar, Booking bar, Location and surroundings and Guest reviews. You pick one with the variant prop, for example variant="availability".

Can I translate the texts of Rooms and stays?

Yes. Rooms and stays carries 63 texts of its own in English and German, such as “/ night”, “Choose room” and “Chosen”. The language follows the KitProvider, single texts change through the labels prop.

Can an AI assistant build with Rooms and stays?

Yes. Through the MCP server of the aiw CLI, Claude, Cursor, GitHub Copilot, Windsurf, Codex and Gemini find Rooms and stays with aiw_components and install it with aiw_add @ai-website/rooms. Name the variant in your prompt, for example variant="room-cards", 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 Rooms and stays on a page.

Often searched

Jump to

Copied to the clipboard