shadcn.io is not affiliated with official shadcn/ui
Listing Card Showing Contact Block for React
A showing request built around one drawn listing: three open-house times with spots free, or a private showing with a part of the day, beside a card with price, rooms and market figures.
Installation
Overview
A contact section for React with Base UI built around a single listing. On a wide screen the listing sits at the start behind a framed card: a house drawn in line (greyscale, no photo), its address, price, bedrooms, bathrooms and floor area, and a bar of three market figures (days on the market, viewings booked, price per square foot). The other side, behind a split divider that meets the top rule with a plus, holds a compact header and the request. The visitor picks one of three open-house times in a Radio Group, each cell showing its spots free and marked by a foreground ring, or turns on "Prefer a private showing" with a Switch to choose a part of the day in a Select instead. The two choices share one space, so flipping the switch never changes the block's height. A name and an email complete the form, which checks itself on submit, shows each problem under its field, marks the control invalid and moves focus to the first one; a valid request turns into a confirmation in the same space that repeats what was asked for. In the markup the header and form come before the listing; on a phone the listing becomes a compact row between the header and the form. The address, price and figures are made up, and the card says so. For realtors and brokerages.
FAQ
How do I change the listing and its figures?
Edit the Listing component and the FACTS array at the top of the file: the address, price, rooms and the three market figures are plain text there. The house is an inline SVG in House, drawn with currentColor strokes and theme fills, so it follows light and dark themes and your radius. Replace it with your own photo only if you keep a text alternative; the card is labelled "Example listing" and so is the note under it, which should go once the figures are real.
What does the private-showing switch do?
It swaps the open-house list for a Select of four parts of the day. Both live in one grid cell and the hidden one is invisible and inert, so it can't be tabbed to or read, and the block keeps the taller one's height. Turning the switch off again brings back the open house the visitor had already chosen.
Do the spots free go down when someone sends a request?
No. The numbers are fixed text in SLOTS, and the confirmation says nothing is booked until an agent confirms by email. Connect SLOTS to your viewings calendar if you want live counts, and disable the cell once its spots reach zero.
How does the open-house list work with a keyboard?
The three times are a radio group named "Open house times", and each cell is the label of its radio, so a click anywhere on it chooses it. Arrow keys move between the times and choose as they go; Tab leaves the group.
Each radio has an id that its cell's label points to.
An empty submit puts focus on the first time.
Where does the form send its data?
Nowhere yet. The submit handler waits 800 milliseconds as a stand-in for a request, then shows the confirmation. Replace that timer in submit with a call that sends details, slot and priv (the private-showing switch) to your viewings calendar or CRM.
How does it fit on a phone?
The listing shrinks to a row: a small drawing beside the address, price and the bedrooms and bathrooms, with the three market figures under it, and the form follows straight after so its first field starts within the first screen. The floor area and the office address are hidden on phones to keep the card short.
Related
- Pro
Live Count Property Search Contact
Finance and propertyA rental search whose match count falls as you narrow it: bedrooms, a rent range, must-haves and neighbourhood chips, three example homes beside it, then a form that checks itself and confirms in place.
- Pro
Rent Affordability Contact
Finance and propertyA rental inquiry card in card where a monthly income fills a rent-to-income bar with a 33% guide tick, beside a lease term, a move-in date picker and a name and email.
- Pro
Talk to Sales Contact
Contact formsA talk-to-sales split for a scheduling platform: what happens next as three numbered steps and a band of contact details beside a form that checks itself, shows each problem under its field and confirms in place.
- Pro
Repair Triage Contact
Repairs and claimsA repair report for a lettings agent: six category cells on shared hairlines, each with its published reply time, a callout with safety advice that follows the choice, and a form with a searchable list of homes.
- Pro
Crew Estimate Moving Contact
Quotes and estimatesA moving quote in three bands: a home-size segment and special-item toggles, a live crew, truck and hours estimate, then distance, move date, name and email.
- Pro
Stylist Booking Contact
Visits and servicesA salon booking that starts with the person: three stylists in hairline cells, each with their next three openings as chips, a live appointment line, and a form that checks itself and confirms in place.