Skip to content
UI Kit
Accent color

Estate agent

For estate agents who sell homes for their owners. An online valuation, the sale on a week grid, the weekly report for sellers, sold references and a market report by district.

5 variants
Switch category

Estate agent

Online valuation

Three short steps with a bar that fills, each step slides in. At the end the value counts up, a range with a marker pops in and a free visit is offered.

Open in Studio

Sale process

The sale on a week grid, every step a bar that grows in one after another while scrolling. Pointing at a row lights it up. On the phone a list with the weeks as a small bar.

Open in Studio

Seller report

The weekly report owners get. Switch weeks on a gliding switch, the key figures count, the daily bars grow and the funnel from view to offer follows, with a note from the agent.

Open in Studio

Sold references

Sold homes with a ribbon, the days to sale and the price achieved over asking. Filter by district on chips, the cards rise in again, pictures zoom on hover.

Open in Studio

Market report

Districts with their price per m² and the change, a line marks the chosen one. A chart draws the five year trend anew, the price counts to its value.

Open in Studio

Details

What Estate agent brings along, read from the registry and the source.

Area
Industries
Variants
5
Version
1.0.0 · since 1.1.0
File
components/ui/real-estate-agent.tsx
Brings along
utilskitbuttoniconinputsectionmotionslider
npm packages
None
Languages
English and German, 45 texts of its own
Studio
All 5 variants editable
Build with AI
Over MCP in Claude, Cursor, Copilot and Codex

Props

The RealEstateAgentProps interface from components/ui/real-estate-agent.tsx, with the comments from the code.

  • variantoptional
    RealEstateAgentVariant

    valuationsale-processseller-reportreferencesmarket-report

  • eyebrowoptional
    React.ReactNode
  • titleoptional
    React.ReactNode
  • descriptionoptional
    React.ReactNode
  • typesoptional
    AgentPropertyType[]

    valuation

  • stepsoptional
    AgentStep[]

    sale-process

  • propertyoptional
    string

    seller-report: the property and its weeks on the market

  • weeksoptional
    AgentWeek[]
  • referencesoptional
    AgentReference[]

    references

  • districtsoptional
    AgentDistrict[]

    market-report

  • startYearoptional
    number

    market-report: the first year of the price series

  • currencyoptional
    string

Built-in texts

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

Show all 45 texts
stepEnglish Step {n} of {total}German Schritt {n} von {total}
kindEnglish What do you want to sell?German Was möchtest du verkaufen?
areaEnglish Living areaGerman Wohnfläche
yearEnglish Built inGerman Baujahr
conditionEnglish ConditionGerman Zustand
renovateEnglish Needs workGerman Renovierungsbedürftig
goodEnglish GoodGerman Gepflegt
newEnglish Like newGerman Neuwertig
postcodeEnglish PostcodeGerman Postleitzahl
nextEnglish ContinueGerman Weiter
backEnglish BackGerman Zurück
showEnglish Show my estimateGerman Meine Schätzung zeigen
estimateEnglish Estimated market valueGerman Geschätzter Marktwert
perM2English {price} per m²German {price} pro m²
rangeEnglish RangeGerman Spanne
preciseEnglish Get a precise valuation for freeGerman Kostenlose Bewertung vor Ort
againEnglish Start againGerman Neu starten
weeksTotalEnglish In {n} weeks to the notaryGerman In {n} Wochen zum Notartermin
weekEnglish WeekGerman Woche
weekNEnglish Week {n}German Woche {n}
weeksRangeEnglish Weeks {from} to {to}German Woche {from} bis {to}
planEnglish Plan your sale with usGerman Verkauf mit uns planen
viewsEnglish ViewsGerman Aufrufe
savedEnglish SavedGerman Gemerkt
inquiriesEnglish InquiriesGerman Anfragen
viewingsEnglish ViewingsGerman Besichtigungen
offersEnglish OffersGerman Angebote
funnelEnglish From view to offerGerman Vom Aufruf zum Angebot
perDayEnglish Views per dayGerman Aufrufe pro Tag
daysEnglish Mon,Tue,Wed,Thu,Fri,Sat,SunGerman Mo,Di,Mi,Do,Fr,Sa,So
reportEnglish Your weekly reportGerman Dein Wochenbericht
soldEnglish SoldGerman Verkauft
soldInEnglish Sold in {n} daysGerman Verkauft in {n} Tagen
askingEnglish AskingGerman Angebotspreis
achievedEnglish AchievedGerman Erzielt
overEnglish {n}% over askingGerman {n} % über Angebot
atAskingEnglish At the asking priceGerman Zum Angebotspreis
allEnglish AllGerman Alle
sellTooEnglish Sell with usGerman Mit uns verkaufen
districtEnglish DistrictGerman Stadtteil
trendEnglish {n}% in {years} yearsGerman {n} % in {years} Jahren
onMarketEnglish Days on marketGerman Tage am Markt
m2English per m²German pro m²
reportCtaEnglish Download the full market reportGerman Ganzen Marktbericht herunterladen
zipErrorEnglish Please enter a postcode with four or five digitsGerman Bitte gib eine Postleitzahl mit vier oder fünf Ziffern ein

Accessibility

Read from the source of the component.

  • Estate agent handles the keys Arrow up, Arrow down, Arrow left, Arrow right and Space itself.
  • Sets aria-checked, aria-label and aria-live, so screen readers announce purpose and state.
  • Uses the roles radio and radiogroup.
  • Announces changes through a live region without moving focus.
  • 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. 7 places in the code switch motion off then.

Frequent questions

How do I install Estate agent?

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

Which variants does Estate agent have?

5 variants, Online valuation, Sale process, Seller report, Sold references and Market report. You pick one with the variant prop, for example variant="sale-process".

Can I translate the texts of Estate agent?

Yes. Estate agent carries 45 texts of its own in English and German, such as “What do you want to sell?”, “Living area” and “Built in”. The language follows the KitProvider, single texts change through the labels prop.

Can an AI assistant build with Estate agent?

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

Can I adjust Estate agent without code?

Yes, in the Studio. All 5 variants are editable there, texts, lists and switches. The Studio writes the matching RealEstateAgent code to copy.

Similar components

More from Industries, the same area of the kit.

Often combined with

Sections that usually sit next to Estate agent on a page.

Often searched

Jump to

Copied to the clipboard