shadcn.io is not affiliated with official shadcn/ui
IoT Dashboard Sidebar Block for Radix UI
A smart-home hub in a fixed-height window whose slim sidebar powers four rooms with switches, says how many are on, and draws a floor plan where the powered rooms are shaded.
Installation
Overview
Switch rooms on and see the house change with this IoT dashboard sidebar for React with Radix UI. A window framed by a hairline with a plus mark on each corner holds a slim Sidebar for Lumengrid, a smart-home hub, with four rooms: Living room, Kitchen, Bedroom and Garage. Each room is a link that opens it and a Switch that powers it, a line under the list says how many are on, and one button, whose label follows the state, turns every room on or off. The page draws a greyscale floor plan whose powered rooms are shaded and the others outlined, the room you are viewing drawn with a heavier line, and lists the room's devices and what it draws in words. Built from Sidebar, Switch, Badge, Button and Guides, with a CSS entrance only. For smart-home hubs, building controls and any sidebar whose rows switch something on.
FAQ
How do the switches and the All on button work?
Each room's switch is named Power for and the room, and it changes that room alone. The line under the list, the button label, the badge in the top bar and the shading on the floor plan all read the same state, so they cannot disagree. The button says All off when every room is on and All on otherwise, and pressing it sets all four rooms at once.
How is the floor plan drawn, and is it readable without seeing it?
It is one SVG of four rectangles from typed positions, shaded with a foreground tint when the room is on and left open when it is off. The drawing is hidden from assistive technology on purpose: the room name, its state, its devices and its draw are all in text beside it, and the status line says what changed after every press.
Where does the power figure come from?
Each room has a typed wattage that it draws while it is on. The room's own figure shows 0 W when it is off, and the whole-home figure under the page is the sum over the rooms that are on, so switching a room off lowers it.
What happens when the sidebar folds to icons?
Folded, the rail is four room icons with tooltips that say on or off. The switches and the All on button are hidden while it is folded, so unfold the rail to power a room. The provider is set with persist={false} and shortcut={false}, so the block writes no cookie and leaves Ctrl and Command with B to the page it sits on.
What stays in the page, and how do I connect it?
Everything. The rooms, devices and wattages are typed at the top of the file and nothing is connected to a real hub. Send the switch change to your hub in the switchRoom handler and read the starting state from it. The rail links are SidebarMenuButtons with asChild around an a element.
How does it work on a phone?
Below the medium breakpoint the sidebar is a sheet that the menu button in the top bar opens from the start edge, the right in a right-to-left layout. The switches are inside it; choosing a room closes the sheet, switching one leaves it open. The status line under the page says what happened, and the sheet carries its own copy of it while it is open.