shadcn.io is not affiliated with official shadcn/ui
Day and Dusk Real Estate Gallery Block for Radix UI
A listing gallery for a townhouse: a stage that goes room by room, a Day and Dusk switch that lights every window and lamp, and the listing's price, floor area and a Book a viewing button.
Installation
Overview
A real estate gallery for React with Radix UI. A 3:2 stage shows one picture of a townhouse: the front of the house, the living room, the kitchen, the bedroom or the garden, chosen from a toggle group under it. Next to the group, a Day and Dusk switch turns every picture to evening: the sky sinks, windows and lamps light up, pendants and bedside lamps pool their light. At the end of the split are the listing's facts in a definition list (price, price per square metre, bedrooms and bathrooms, floor area in square metres and square feet, and the room on the stage) and the Shine Button, "Book a viewing". On a phone the facts follow under a rule. All five pictures are drawn in the theme's greys, never photographed. It's built from Guides, Toggle Group, Switch and Shine Button, with CSS transitions for the entrance. For lettings, new-build sales, holiday homes and any place worth seeing twice.
FAQ
How does the Dusk switch work?
Every picture is drawn from typed data and a dusk flag. With the flag on, the picture uses a darker ground, the kit lights the windows, fanlights, lamps and pendants, and a moon and stars replace the sun. The same room is drawn both ways, so with photographs you would keep a day and a dusk image per room and choose one in sceneOf's place.
How do I add a room?
Add an entry to ROOMS (an id, label, title, metres, a day and a dusk description) and write its picture: each room is a small function in the scene kit that returns the picture as paths. The toggle group takes more items; on a phone the labels shrink, so keep them to one short word.
Where do the numbers come from?
The listing is typed once in LISTING (price, area, bedrooms, bathrooms). The price per square metre, the area in square feet and each room's area under the stage are calculated from it, so changing a number changes everywhere it is shown.
What does Book a viewing do?
It marks the request as saved in this demo (the label changes and a polite line says so) and sends nothing. Connect it to your booking form in request.