Skip to content
UI Kit
Accent color

Listings

Properties with filters, a detail page, a map with a list, a comparison, a mortgage calculator and a viewing request.

6 variants
Switch category

Listings

Grid with filters

Buy or rent, type, rooms, price and sort above cards with photo and facts.

Listing detail

Gallery, key facts, description, features and floor plan, the price card stays in view.

Map with list

Price pins on a drawn map beside the list, cards under the map on phones.

Compare two homes

Side by side, the better value in each row marked, features as checks.

Mortgage calculator

Price, equity, interest and term set the monthly rate, buying costs included.

Request a viewing

The home beside real viewing slots with places left and a validated form.

Details

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

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

Props

The ListingsProps interface from components/ui/listings.tsx, with the comments from the code.

  • 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

Built-in texts

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

Show all 78 texts
buyEnglish BuyGerman Kaufen
rentEnglish RentGerman Mieten
allEnglish AllGerman Alle
typeEnglish TypeGerman Art
roomsEnglish RoomsGerman Zimmer
roomsNEnglish {n} roomsGerman {n} Zimmer
roomsShortEnglish {n} rmGerman {n} Zi.
minRoomsEnglish {n}+ roomsGerman ab {n} Zimmer
anyRoomsEnglish AnyGerman Egal
maxPriceEnglish Max. priceGerman Preis bis
noLimitEnglish No limitGerman Ohne Grenze
sortEnglish SortGerman Sortieren
newestEnglish Newest firstGerman Neueste zuerst
priceAscEnglish Price, low to highGerman Preis aufsteigend
priceDescEnglish Price, high to lowGerman Preis absteigend
areaDescEnglish Largest firstGerman Größte zuerst
resultsEnglish {n} propertiesGerman {n} Objekte
noneEnglish Nothing matches these filters. Try fewer rooms or a higher price.German Nichts passt zu diesen Filtern. Versuche weniger Zimmer oder einen höheren Preis.
resetEnglish Reset filtersGerman Filter zurücksetzen
filtersEnglish FiltersGerman Filter
saveEnglish SaveGerman Merken
savedEnglish SavedGerman Gemerkt
perMonthEnglish / monthGerman / Monat
perSqmEnglish {price} per m²German {price} pro m²
areaEnglish Living areaGerman Wohnfläche
plotEnglish PlotGerman Grundstück
yearEnglish BuiltGerman Baujahr
floorEnglish FloorGerman Etage
energyEnglish Energy classGerman Energieklasse
priceEnglish PriceGerman Kaufpreis
rentPriceEnglish RentGerman Kaltmiete
extraEnglish {price} additional costsGerman {price} Nebenkosten
featuresEnglish FeaturesGerman Ausstattung
descriptionEnglish About this homeGerman Über dieses Zuhause
planEnglish Floor planGerman Grundriss
photosEnglish Show all {n} photosGerman Alle {n} Fotos zeigen
photoEnglish Photo {n} of {total}German Foto {n} von {total}
prevPhotoEnglish Previous photoGerman Vorheriges Foto
nextPhotoEnglish Next photoGerman Nächstes Foto
requestEnglish Request a viewingGerman Besichtigung anfragen
callEnglish CallGerman Anrufen
agentEnglish Your contactGerman Deine Ansprechperson
mapEnglish MapGerman Karte
listEnglish ListGerman Liste
showEnglish Show on mapGerman Auf der Karte zeigen
betterEnglish betterGerman besser
compareEnglish ComparisonGerman Vergleich
pricePerSqmEnglish Price per m²German Preis pro m²
purchasePriceEnglish Purchase priceGerman Kaufpreis
equityEnglish EquityGerman Eigenkapital
interestEnglish Interest rateGerman Sollzins
termEnglish Fixed forGerman Zinsbindung
yearsNEnglish {n} yearsGerman {n} Jahre
monthlyEnglish Monthly rateGerman Monatliche Rate
loanEnglish LoanGerman Darlehen
feesEnglish Buying costsGerman Kaufnebenkosten
totalInterestEnglish Interest over {n} yearsGerman Zinsen in {n} Jahren
remainingEnglish Left to pay after {n} yearsGerman Restschuld nach {n} Jahren
repaymentEnglish With {n} repayment a year at the startGerman Mit {n} anfänglicher Tilgung im Jahr
estimateEnglish An estimate without obligation. Your bank sets the actual terms.German Eine unverbindliche Schätzung. Die echten Konditionen legt deine Bank fest.
pickSlotEnglish Pick a viewingGerman Besichtigung wählen
fullEnglish FullGerman Voll
placesLeftEnglish {n} places leftGerman Noch {n} Plätze
placeLeftEnglish Last placeGerman Letzter Platz
nameEnglish NameGerman Name
emailEnglish EmailGerman E-Mail
phoneEnglish PhoneGerman Telefon
messageEnglish MessageGerman Nachricht
messageHintEnglish Who moves in, when you could moveGerman Wer einzieht, ab wann du umziehen könntest
financingEnglish I have a financing confirmationGerman Ich habe eine Finanzierungsbestätigung
sendEnglish Send requestGerman Anfrage senden
requiredEnglish Please fill in this field.German Bitte fülle dieses Feld aus.
invalidEmailEnglish Please enter a valid email address.German Bitte gib eine gültige E-Mail-Adresse ein.
slotRequiredEnglish Please pick a viewing.German Bitte wähle eine Besichtigung.
sentEnglish Request sentGerman Anfrage gesendet
sentTextEnglish We will confirm the viewing on {when} by email. If something changes, just reply to it.German Wir bestätigen die Besichtigung am {when} per E-Mail. Ändert sich etwas, antworte einfach darauf.
againEnglish Send another requestGerman Weitere Anfrage senden
optionalEnglish optionalGerman optional

Accessibility

Read from the source of the component.

  • Listings handles the keys Arrow left and Arrow right itself.
  • Sets aria-checked, aria-describedby, 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

  • Rises in briefly the first time it comes into view (kit-rise, useInView).
  • Moves with the scroll, its progress follows the position on the page.
  • Brings animations of its own, calmly timed and without wobble.
  • With reduced motion (prefers-reduced-motion) it stays still. 11 places in the code switch motion off then.

Frequent questions

How do I install Listings?

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

Which variants does Listings have?

6 variants, Grid with filters, Listing detail, Map with list, Compare two homes, Mortgage calculator and Request a viewing. You pick one with the variant prop, for example variant="detail".

Can I translate the texts of Listings?

Yes. Listings carries 78 texts of its own in English and German, such as “Buy”, “Rent” and “All”. The language follows the KitProvider, single texts change through the labels prop.

Can an AI assistant build with Listings?

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

Often searched

Jump to

Copied to the clipboard