shadcn.io is not affiliated with official shadcn/ui
Floor Plan About Block for React
An 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.
Installation
Overview
A floor plan for React with Base UI, written for Roomwise, a fictional space planner, showing the company's own Lisbon floor. The header states the seat total, which is the sum of the rooms. A vertical toggle group lists the six rooms with their seats. Choosing a room, moving focus onto it, or pointing at its shape on the plan rings that room and shows its note, its seats and three amenities. The detail stays on the page for every room, so the block does not change height. The drawing is hidden from assistive technology and is not in the tab order: the list is the control. On a wide screen the list sits at the start and the framed plan at the end; on a phone the plan is drawn above the list, while the list still comes first in the page. The plan itself does not mirror. The page's rails and top rule come from the Guides spine. It's built from ToggleGroup, Badge and Guides, with a CSS entrance and your theme's tokens for every colour. For an about page that should let someone walk a floor. The rooms are example data.
FAQ
How do I change the rooms?
The rooms are ROOMS at the top of the file. Each has a name, a note, a seats count, three amenities, and x, y, w and h on a 320 by 220 plan. The header's seat total is the sum of seats. The first room starts selected. Keep the 8-unit gaps if you move a room, or the shapes will touch.
How do I pick a room?
The list is a single choice, so one room is always on. Clicking a room, moving focus onto its button, or pointing at its shape selects it and thickens its outline. Pressing the room that is already chosen leaves it chosen. The note, the seat count and the three badges under the list update together. The drawing is not a keyboard control.
How is it read by a screen reader?
The heading is the section's only h2. The list is labelled "Rooms", and each button names the room and its seats. The chosen room is an h3, then its note, its seats and the amenities. The drawing is hidden. Its caption, "The Lisbon floor. The ring marks the room you chose.", is what the figure exposes.
How does it fit on a phone?
The plan is shown above the list. The list still comes first in the page, so a screen reader reaches the rooms before the caption. From lg the list is at the start and the plan at the end, with a divider between them. Room names sit inside their shapes, and nothing scrolls sideways at 320 pixels.
Related
- Pro
City Cards About
Team and officesA snap row of tall city cards for a coworking company, with the city in large type, when the house opened, how many desks it holds, and whether it is hiring.
- Pro
Overlap Hours About
Team and officesAn about section for a time-zone scheduler: three offices on a 24-hour axis, with the hours they all share labelled and counted.
- Pro
Timetable Day in the Life About
Culture and valuesOne person's Tuesday as a timetable: three lanes (Focus, Meetings, Support) over the working day, with blocks you pick to read what each one was for.
- Pro
Perk Wallet About
CareersAn about section for a wellness-benefits company: eight perks in shared hairlines, each with a yearly amount, and a heading that is their sum.
- Pro
Culture Rituals About
Culture and valuesA team's rituals sorted by how often they happen: three bands, every week, every quarter and every year, each with three cells that say what the ritual is, who comes and how long it takes.
- Pro
Participation Rings About
Culture and valuesAn about section for an employee-engagement company: five rituals as rings for the share of the team that joins, each with a cadence badge and one line.