shadcn.io is not affiliated with official shadcn/ui
Floor Plan Unit Types Gallery Block for React
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 Base UI, 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.
Related
- Pro
Zoom and Pan Viewer Gallery
Compare, crop and zoomA framed viewport onto one large drawn city plan that you zoom and pan by buttons, a slider, keys, drag, double-click, Control or Command with the wheel, and a two-finger pinch.
- Pro
Day and Dusk Real Estate Gallery
Stage and thumbnailsA 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.
- Pro
Floor Plan About
Team and officesAn interactive floor plan for a space-planning company, where choosing one of six rooms rings it on the drawing and shows its seats and amenities.
- Pro
Stepped Before and After Gallery
Compare, crop and zoomOne drawn room in three layers, bare plaster, mid-job and finished, revealed from the foot of the picture by a slider with three stops, with room tabs and a line on each visit.
- Pro
Seasonal Year Scrubber Gallery
Compare, crop and zoomOne drawn orchard that follows a twelve-stop month slider: the sun's height and size, the leaves, the snow line and the ground's tone change, with the month in words and the job for it.
- Pro
Product Showcase Gallery
Stage and thumbnailsA product viewer for a running shoe: a vertical rail of four angles beside a 4:3 stage, three finishes that recolour every picture, and price, sizes and stock with an Add to bag button.