shadcn.io is not affiliated with official shadcn/ui
Floor Plan Team Block for React
A coworking brand's third floor drawn as a greyscale plan with eight desks you can pick, a legend of the rooms in text, and the person at the chosen desk with their room, their days and what is on their desk.
Installation
Overview
An office-tour section for React with Base UI, for Harcombe, a coworking brand. A compact header sits over a split behind a hairline divider. The start half is a framed figure: a floor plan drawn in greyscale (five rooms, a boardroom table, a kitchen counter) with eight desks on it. Each desk is a radio showing its occupant's initials; the chosen desk fills in and its room is tinted. Under the plan a legend lists the same five rooms in text with the first names of the people in each. The end half is the chosen person: their name and role, the room they sit in, the days they are in and what is on their desk. All eight are drawn once in the same grid cell, so picking a desk never moves the page; on a phone the person drops under the plan. It's built from Data List, Avatar, Badge and Guides, with your theme's tokens for every colour. The floor, its people and their desks are fictional.
FAQ
How do I move around the plan with the keyboard?
The desks are one radio group, so Tab moves into the plan once and the arrow keys walk from desk to desk in reading order (the order of DESKS in the file). The chosen desk is filled in and the focused one has a visible outline. Nothing else on the plan is focusable.
What does a screen reader get?
The plan is decoration: the rooms and the furniture are hidden from assistive technology. Each desk is a radio named "Name, role, room" and described by that person's details (room, days and desk items), and the legend is a plain list of the rooms with who sits in each. The chosen person is a heading with a description list under it.
How do I redraw the plan or add a desk?
Edit ROOMS (a box as percentages of the plan's width and height), FURNITURE (muted shapes in the same units) and DESKS at the top of the file. A desk is a person's name, role, room, days and items, plus an x and y for its centre in percent. The plan keeps an 8:5 shape at any width.
Does the block change height when I pick a desk?
No. All eight people are drawn in one grid cell and only the chosen one is visible; the others are hidden from sight and from assistive technology. The cell is as tall as the person with the longest list.
Related
- Pro
Hybrid Week Desks Team
Hours and placesA coworking company's hybrid week as a table: eight people by Monday to Friday, each cell a desk code like BER-214 or Remote, a who-is-in count under each day and a select to look at one office.
- Pro
Office Bands Team
Hours and placesThree offices of a hotel revenue-software company as bands that run from rail to rail: the city and its address, the local time there, the headcount, and three of the people you will meet in cells that share their hairlines.
- Pro
Time Zone Axis Team
Hours and placesTen people of a remote-first payroll company laid along an axis of UTC offsets, each office with its avatars, a live local time and a shaded band where it is working time, over six cells that list the same zones.
- Pro
Office Tabs Team
Hours and placesThe four offices of a surveying app in a split: a vertical tab rail of offices beside a page with the address, the local time, the opening hours, the people who work there and a Plan a visit link.
- Pro
Quadrant Plot Two Axis Map Features
Diagrams and mapsA hairline plot for a prioritisation tool: six backlog ideas as dots on impact against effort, one radio group, with a panel beside it reading out the chosen idea's scores and verdict.
- 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.