Zum Inhalt springen
UI Kit
Accent

Listings

Immobilien mit Filtern, Detailseite, Karte mit Liste, Vergleich, Finanzierungsrechner und Besichtigungsanfrage.

6 Variants
Kategorie wechseln

Inserate

Raster mit Filtern

Kaufen oder mieten, Art, Zimmer, Preis und Sortierung über Karten mit Foto und Eckdaten.

Inseratsdetail

Galerie, Eckdaten, Beschreibung, Ausstattung und Grundriss, die Preiskarte bleibt im Blick.

Karte mit Liste

Preisnadeln auf einer gezeichneten Karte neben der Liste, auf dem Telefon Karten unter der Karte.

Zwei Objekte vergleichen

Nebeneinander, der bessere Wert je Zeile markiert, Ausstattung als Haken.

Finanzierungsrechner

Kaufpreis, Eigenkapital, Zins und Bindung ergeben die Monatsrate, Nebenkosten inklusive.

Besichtigung anfragen

Das Objekt neben echten Terminen mit freien Plätzen und einem geprüften Formular.

Details

Was Inserate mitbringt, aus Registry und Quellcode gelesen.

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

Props

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

  • variantoptional
    ListingsVariant

    grid-filtersdetailmap-listcomparemortgageviewing

  • eyebrowoptional
    React.ReactNode
  • titleoptional
    React.ReactNode
  • descriptionoptional
    React.ReactNode
  • listingsoptional
    Listing[]
  • listingoptional
    Listing

    detail, viewing: the one property

  • planoptional
    React.ReactNode

    detail: a floor plan drawing

  • mapoptional
    React.ReactNode

    map-list: the map underneath the pins

  • mortgageoptional
    ListingMortgage
  • viewingsoptional
    ListingViewing[]
  • priceStepsoptional
    number[]

    grid-filters: steps for the price filter

  • currencyoptional
    string
  • onRequestoptional
    (data: Record<string, string>) => void

Eingebaute Texte

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

Alle 78 Texte anzeigen
buyEnglisch BuyDeutsch Kaufen
rentEnglisch RentDeutsch Mieten
allEnglisch AllDeutsch Alle
typeEnglisch TypeDeutsch Art
roomsEnglisch RoomsDeutsch Zimmer
roomsNEnglisch {n} roomsDeutsch {n} Zimmer
roomsShortEnglisch {n} rmDeutsch {n} Zi.
minRoomsEnglisch {n}+ roomsDeutsch ab {n} Zimmer
anyRoomsEnglisch AnyDeutsch Egal
maxPriceEnglisch Max. priceDeutsch Preis bis
noLimitEnglisch No limitDeutsch Ohne Grenze
sortEnglisch SortDeutsch Sortieren
newestEnglisch Newest firstDeutsch Neueste zuerst
priceAscEnglisch Price, low to highDeutsch Preis aufsteigend
priceDescEnglisch Price, high to lowDeutsch Preis absteigend
areaDescEnglisch Largest firstDeutsch Größte zuerst
resultsEnglisch {n} propertiesDeutsch {n} Objekte
noneEnglisch Nothing matches these filters. Try fewer rooms or a higher price.Deutsch Nichts passt zu diesen Filtern. Versuche weniger Zimmer oder einen höheren Preis.
resetEnglisch Reset filtersDeutsch Filter zurücksetzen
filtersEnglisch FiltersDeutsch Filter
saveEnglisch SaveDeutsch Merken
savedEnglisch SavedDeutsch Gemerkt
perMonthEnglisch / monthDeutsch / Monat
perSqmEnglisch {price} per m²Deutsch {price} pro m²
areaEnglisch Living areaDeutsch Wohnfläche
plotEnglisch PlotDeutsch Grundstück
yearEnglisch BuiltDeutsch Baujahr
floorEnglisch FloorDeutsch Etage
energyEnglisch Energy classDeutsch Energieklasse
priceEnglisch PriceDeutsch Kaufpreis
rentPriceEnglisch RentDeutsch Kaltmiete
extraEnglisch {price} additional costsDeutsch {price} Nebenkosten
featuresEnglisch FeaturesDeutsch Ausstattung
descriptionEnglisch About this homeDeutsch Über dieses Zuhause
planEnglisch Floor planDeutsch Grundriss
photosEnglisch Show all {n} photosDeutsch Alle {n} Fotos zeigen
photoEnglisch Photo {n} of {total}Deutsch Foto {n} von {total}
prevPhotoEnglisch Previous photoDeutsch Vorheriges Foto
nextPhotoEnglisch Next photoDeutsch Nächstes Foto
requestEnglisch Request a viewingDeutsch Besichtigung anfragen
callEnglisch CallDeutsch Anrufen
agentEnglisch Your contactDeutsch Deine Ansprechperson
mapEnglisch MapDeutsch Karte
listEnglisch ListDeutsch Liste
showEnglisch Show on mapDeutsch Auf der Karte zeigen
betterEnglisch betterDeutsch besser
compareEnglisch ComparisonDeutsch Vergleich
pricePerSqmEnglisch Price per m²Deutsch Preis pro m²
purchasePriceEnglisch Purchase priceDeutsch Kaufpreis
equityEnglisch EquityDeutsch Eigenkapital
interestEnglisch Interest rateDeutsch Sollzins
termEnglisch Fixed forDeutsch Zinsbindung
yearsNEnglisch {n} yearsDeutsch {n} Jahre
monthlyEnglisch Monthly rateDeutsch Monatliche Rate
loanEnglisch LoanDeutsch Darlehen
feesEnglisch Buying costsDeutsch Kaufnebenkosten
totalInterestEnglisch Interest over {n} yearsDeutsch Zinsen in {n} Jahren
remainingEnglisch Left to pay after {n} yearsDeutsch Restschuld nach {n} Jahren
repaymentEnglisch With {n} repayment a year at the startDeutsch Mit {n} anfänglicher Tilgung im Jahr
estimateEnglisch An estimate without obligation. Your bank sets the actual terms.Deutsch Eine unverbindliche Schätzung. Die echten Konditionen legt deine Bank fest.
pickSlotEnglisch Pick a viewingDeutsch Besichtigung wählen
fullEnglisch FullDeutsch Voll
placesLeftEnglisch {n} places leftDeutsch Noch {n} Plätze
placeLeftEnglisch Last placeDeutsch Letzter Platz
nameEnglisch NameDeutsch Name
emailEnglisch EmailDeutsch E-Mail
phoneEnglisch PhoneDeutsch Telefon
messageEnglisch MessageDeutsch Nachricht
messageHintEnglisch Who moves in, when you could moveDeutsch Wer einzieht, ab wann du umziehen könntest
financingEnglisch I have a financing confirmationDeutsch Ich habe eine Finanzierungsbestätigung
sendEnglisch Send requestDeutsch Anfrage senden
requiredEnglisch Please fill in this field.Deutsch Bitte fülle dieses Feld aus.
invalidEmailEnglisch Please enter a valid email address.Deutsch Bitte gib eine gültige E-Mail-Adresse ein.
slotRequiredEnglisch Please pick a viewing.Deutsch Bitte wähle eine Besichtigung.
sentEnglisch Request sentDeutsch Anfrage gesendet
sentTextEnglisch We will confirm the viewing on {when} by email. If something changes, just reply to it.Deutsch Wir bestätigen die Besichtigung am {when} per E-Mail. Ändert sich etwas, antworte einfach darauf.
againEnglisch Send another requestDeutsch Weitere Anfrage senden
optionalEnglisch optionalDeutsch optional

Barrierefreiheit

Aus dem Quellcode der Component abgeleitet.

  • Inserate reagiert selbst auf die Tasten Pfeil links und Pfeil rechts.
  • Setzt aria-checked, aria-describedby, 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

  • 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. 11 Stellen im Code schalten Bewegung dann ab.

Häufige Fragen

Wie installiere ich Inserate?

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

Welche Varianten hat Inserate?

6 Varianten, Raster mit Filtern, Inseratsdetail, Karte mit Liste, Zwei Objekte vergleichen, Finanzierungsrechner und Besichtigung anfragen. Du wählst sie mit der Prop variant, zum Beispiel variant="detail".

Kann ich die Texte von Inserate übersetzen?

Ja. Inserate bringt 78 eigene Texte auf Deutsch und Englisch mit, etwa „Kaufen“, „Mieten“ und „Alle“. Die Sprache folgt dem KitProvider, einzelne Texte ersetzt du über die Prop labels.

Kann ein KI-Assistent Inserate einbauen?

Ja. Über den MCP-Server der aiw CLI finden Claude, Cursor, GitHub Copilot, Windsurf, Codex und Gemini Inserate mit aiw_components und installieren sie mit aiw_add @ai-website/listings. Nenn im Prompt die Variante, etwa variant="grid-filters", 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 Listings stehen.

Oft gesucht

Direkt zu

In die Zwischenablage kopiert