shadcn.io is not affiliated with official shadcn/ui
Floor Plan About Block for Svelte
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 Svelte with Ark 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.