shadcn.io is not affiliated with official shadcn/ui
Listing Card Showing Contact Block for Solid
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 Solid with Ark 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. 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.