shadcn.io is not affiliated with official shadcn/ui
Warehouse Management Sidebar Block for React
A warehouse manager in a fixed-height window whose muted sidebar is a capacity tree of three zones and eight aisles with usage bars, rolled up per zone and drawn as a rack elevation on the page.
Installation
Overview
Read how full a warehouse is from its sidebar with this warehouse management sidebar for React with Base UI. A window framed by a hairline with a plus mark on each corner holds a muted 16rem Sidebar for Palletwick, a warehouse manager, whose list is a tree: Zone A, B and C fold open into their aisles, each aisle a thin Progress bar of pallet positions used, and each zone showing the figure rolled up from its aisles. Choosing an aisle draws its rack elevation on the page, six bays across and four levels up with the used positions filled, lists used, free and zone figures in words, and says Over 90% full when an aisle is. Built from Sidebar, Progress, Badge and Guides, with a CSS entrance only. For warehouse, stock and capacity tools and any tree of meters.
FAQ
How is a zone's percentage worked out?
From its aisles. Each aisle lists how many of its four levels hold a pallet in each of six bays, so its used and total positions are sums, and a zone adds up its aisles before it divides. Zone B is therefore not the average of three percentages but 55 of 72 positions. Change an aisle and its bar, its zone, the badge in the top bar and the elevation all follow.
How do zones fold, and is it accessible?
Each zone heading is a button with aria-expanded and aria-controls pointing at its aisles. A folded list is inert and invisible, so Tab never lands inside it. Opening an aisle from anywhere opens its zone too.
How does the block say an aisle is nearly full without colour?
In words and weight. An aisle at 90% or more says Over 90% full in its accessible name, shows its figure in a heavier weight in the rail, and gets a sentence on the page about planning a transfer. The bars are all the same foreground tone.
What happens when the sidebar folds to icons?
Folded, the tree is replaced by three zone icons with tooltips that give each zone's figure. Choosing one opens that zone's first aisle. 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 aisles and their bays are typed at the top of the file, and nothing is counted from a real warehouse. Feed the aisle list from your inventory system and keep the same sums. The rail links are SidebarMenuButtons with render set to 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. Choosing an aisle closes the sheet and the rack elevation takes the page; the zone folds stay as you left them. The status line under the page says what happened, and the sheet carries its own copy of it while it is open.