shadcn.io is not affiliated with official shadcn/ui
Floor Plan Unit Types Gallery Block for React Aria
Four unit layouts drawn to one scale on a metre grid, picked from a toggle group, with a Furnished switch, numbered rooms and a room table whose rows ring their room in the plan.
Installation
Overview
A unit-types viewer for React with React Aria, for Elmbank Flats, a new-build development. A split holds, at the start, a toggle group of four unit types (Studio, 1 bed, 2 bed, 3 bed), a Furnished switch and a table of rooms with their areas, and, at the end, the plan: every room a numbered cell on a faint metre grid, all four units at the same scale, with the furniture drawn when Furnished is on. Pointing at a room's name in the table, or focusing it, rings that room in the plan, and pressing it holds the ring. The areas come from each room's width and depth, rounded to a tenth, and the total is the sum of the rows you see. On a phone the plan sits above the table. The layouts are invented, not any real building's. It's built from Toggle Group, Switch and Guides, with a native table.
FAQ
How do I tell which room a row is?
Each room has a number in the plan and the same number beside its name in the table. Hover, focus or tap the name and the room gets a heavy outline and a darker floor; pressing it again lets go. The pressed state is announced, so a screen reader knows a room is held.
Where do the areas and the total come from?
Each room is a rectangle in metres in the data. Its area is width times depth to one decimal, and the total adds those rounded figures, so the column always sums to the total shown.
Does the table jump between units?
No. Every unit's table has the same number of rows (the spare ones are invisible), the plan has a fixed shape, and switching a unit moves nothing else on the page.
What does the Furnished switch do?
It shows or hides the furniture in every room, with a short fade that is dropped under reduced motion. The plans, with and without furniture, are described in text for assistive technology, so the picture's label gives the unit, the rooms and the total.