shadcn.io is not affiliated with official shadcn/ui
Used in These Rooms Storefront Block for Radix UI
A product shown in nine drawn customer rooms filtered by living room, bedroom or hallway, with a colour picker, Add to bag and a share dialog that reads only file names and sizes.
Installation
Overview
Show a product the way customers use it, with this customer-rooms panel for React with Radix UI. A header names the idea and says what Lowell Living sells. A hairline frame with a plus mark on each corner holds nine drawn customer rooms in hairline cells at the start, each named by the customer's initials and the grey they chose, and the product in a side cell at the end: the Linen Bolster drawn in the chosen grey, its price, five grey swatches and one Shine Button, Add to bag. A Toggle Group (All rooms, Living room, Bedroom, Hallway) brings the matching rooms to the front, keeps the other cells in place but unseen so the panel never changes height, and works the count out again ("Used in 4 of 9 rooms"). Share yours opens a Dialog with a File Upload drop that lists only the names and sizes of what you choose. It's built from Toggle Group, Dialog, File Upload and Guides, with drawn rooms and a CSS entrance only. For a home goods product page that wants proof in context.
FAQ
How do I use my own customers and rooms?
Edit CUSTOMERS: each has initials, a room, the grey step (0 to 4) of the cushion, a seat position and a wood step for the furniture. The room drawings are made from small path lists in livingOf, bedroomOf and hallwayOf; swap RoomArt for an img when you have real photographs and keep its 4:3 box.
What does the filter do to the grid?
It moves the matching rooms to the front and makes the others invisible and inert, in the same cells, so the grid keeps nine cells and the panel keeps its height. The count is derived from the data.
What stays local, and how do I wire sharing for real?
Add to bag only raises the bag count on the page. Share yours reads the File API for names and sizes and nothing leaves the device, which the dialog says. To collect photos, send the files from accept to your upload endpoint and show them after moderation.
Does the colour picker change the rooms?
No. It changes the cushion drawn in the side cell and the colour in the status line; the rooms show what each customer chose.