Zum Inhalt springen
UI Kit
Accent

Rooms und Stays

Zimmer mit Ausstattung und Preis pro Nacht, Verfügbarkeitskalender, Buchungsleiste, Lage und Bewertungen.

5 Variants
Kategorie wechseln

Zimmer und Aufenthalte

Zimmerkarten

Eine breite Karte je Zimmer: Foto, Größe, Gäste, Betten, Ausstattung und Preis pro Nacht.

Verfügbarkeitskalender

Zwei Monate mit dem Preis jeder Nacht, Anreise und Abreise wählen, die Summe rechnet mit.

Buchungsleiste

Ein großes Foto mit Leiste für Anreise, Abreise und Gäste, Erwachsene und Kinder getrennt.

Lage und Umgebung

Eine Karte mit dem Haus in der Mitte, Anreise und was in der Nähe liegt, mit Wegzeiten.

Gästebewertungen

Gesamtnote mit Kategorien, Gästebewertungen mit Aufenthalt und Antworten.

Details

Was Zimmer und Aufenthalte mitbringt, aus Registry und Quellcode gelesen.

Bereich
Industries
Variants
5
Version
1.0.1 · seit 1.0.0
Datei
components/ui/rooms.tsx
Bringt mit
utilskitbuttoniconsectionreveal
npm-Pakete
Keine
Sprachen
Englisch und Deutsch, 63 eigene Texte
Studio
Im Code anpassen
Mit KI bauen
Per MCP in Claude, Cursor, Copilot und Codex

Props

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

  • 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

Eingebaute Texte

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

Alle 63 Texte anzeigen
perNightEnglisch / nightDeutsch / Nacht
guestsNEnglisch Up to {n} guestsDeutsch Bis {n} Gäste
sqmEnglisch {n} m²Deutsch {n} m²
leftNEnglisch Only {n} leftDeutsch Nur noch {n} frei
chooseEnglisch Choose roomDeutsch Zimmer wählen
chosenEnglisch ChosenDeutsch Gewählt
amenitiesEnglisch AmenitiesDeutsch Ausstattung
moreEnglisch +{n} moreDeutsch +{n} weitere
wifiEnglisch Wi-FiDeutsch WLAN
breakfastEnglisch BreakfastDeutsch Frühstück
parkingEnglisch ParkingDeutsch Parkplatz
balconyEnglisch BalconyDeutsch Balkon
bathEnglisch BathtubDeutsch Badewanne
kitchenEnglisch KitchenetteDeutsch Kochnische
petsEnglisch Pets welcomeDeutsch Hunde willkommen
saunaEnglisch SaunaDeutsch Sauna
airconEnglisch Air conditioningDeutsch Klimaanlage
workspaceEnglisch DeskDeutsch Schreibtisch
coffeeEnglisch Coffee machineDeutsch Kaffeemaschine
viewEnglisch ViewDeutsch Aussicht
prevMonthEnglisch Previous monthDeutsch Vorheriger Monat
nextMonthEnglisch Next monthDeutsch Nächster Monat
arrivalEnglisch ArrivalDeutsch Anreise
departureEnglisch DepartureDeutsch Abreise
pickArrivalEnglisch Pick your arrivalDeutsch Wähle deine Anreise
pickDepartureEnglisch Now pick your departureDeutsch Jetzt die Abreise wählen
nightsNEnglisch {n} nightsDeutsch {n} Nächte
nightEnglisch 1 nightDeutsch 1 Nacht
bookedEnglisch BookedDeutsch Belegt
minNightsEnglisch At least {n} nightsDeutsch Mindestens {n} Nächte
totalEnglisch TotalDeutsch Gesamt
reserveEnglisch ReserveDeutsch Reservieren
clearEnglisch Clear datesDeutsch Daten löschen
guestsEnglisch GuestsDeutsch Gäste
adultsEnglisch AdultsDeutsch Erwachsene
adultsHintEnglisch From 13 yearsDeutsch Ab 13 Jahren
childrenEnglisch ChildrenDeutsch Kinder
childrenHintEnglisch Up to 12 yearsDeutsch Bis 12 Jahre
adultsNEnglisch {n} adultsDeutsch {n} Erwachsene
adultEnglisch 1 adultDeutsch 1 Erwachsener
childrenNEnglisch {n} childrenDeutsch {n} Kinder
childEnglisch 1 childDeutsch 1 Kind
fewerEnglisch FewerDeutsch Weniger
more2Englisch MoreDeutsch Mehr
checkEnglisch Check availabilityDeutsch Verfügbarkeit prüfen
resultEnglisch {nights} for {guests}, rooms are free. We show you the prices next.Deutsch {nights} für {guests}, es sind Zimmer frei. Als Nächstes zeigen wir dir die Preise.
datesErrorEnglisch Departure must be after arrival.Deutsch Die Abreise muss nach der Anreise liegen.
getThereEnglisch Getting hereDeutsch Anreise
nearbyEnglisch NearbyDeutsch In der Nähe
walkEnglisch on footDeutsch zu Fuß
bikeEnglisch by bikeDeutsch mit dem Rad
carEnglisch by carDeutsch mit dem Auto
trainEnglisch by trainDeutsch mit der Bahn
directionsEnglisch DirectionsDeutsch Route planen
outOfEnglisch out of 10Deutsch von 10
reviewsNEnglisch {n} reviewsDeutsch {n} Bewertungen
stayedEnglisch Stayed in {date}Deutsch Aufenthalt im {date}
replyEnglisch Reply from the houseDeutsch Antwort des Hauses
exceptionalEnglisch ExceptionalDeutsch Herausragend
excellentEnglisch ExcellentDeutsch Hervorragend
veryGoodEnglisch Very goodDeutsch Sehr gut
goodEnglisch GoodDeutsch Gut
showAllEnglisch Show all reviewsDeutsch Alle Bewertungen zeigen

Barrierefreiheit

Aus dem Quellcode der Component abgeleitet.

  • Zimmer und Aufenthalte reagiert selbst auf die Tasten Escape.
  • Setzt aria-controls, aria-current, aria-expanded, aria-invalid, aria-label, aria-live und aria-pressed, damit Screenreader Zweck und Zustand ansagen.
  • Nutzt die Rollen grid, group 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

  • Erscheint beim ersten Sichtkontakt mit einem kurzen Auftritt (kit-rise, useInView).
  • 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 Zimmer und Aufenthalte?

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

Welche Varianten hat Zimmer und Aufenthalte?

5 Varianten, Zimmerkarten, Verfügbarkeitskalender, Buchungsleiste, Lage und Umgebung und Gästebewertungen. Du wählst sie mit der Prop variant, zum Beispiel variant="availability".

Kann ich die Texte von Zimmer und Aufenthalte übersetzen?

Ja. Zimmer und Aufenthalte bringt 63 eigene Texte auf Deutsch und Englisch mit, etwa „/ Nacht“, „Zimmer wählen“ und „Gewählt“. Die Sprache folgt dem KitProvider, einzelne Texte ersetzt du über die Prop labels.

Kann ein KI-Assistent Zimmer und Aufenthalte einbauen?

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

Ähnliche Components

Mehr aus Industries, demselben Bereich des Kits.

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben Rooms und Stays stehen.

Oft gesucht

Direkt zu

In die Zwischenablage kopiert