shadcn.io is not affiliated with official shadcn/ui
Cloud Console Sidebar Block for Radix UI
A cloud console in a fixed-height window whose tinted sidebar has a Region select that disables services the region does not offer and counts what is left in each of four collapsing groups.
Installation
Overview
Scope a console to a region with this cloud console sidebar for React with Radix UI. A window framed by a hairline with a plus mark on each corner holds a tinted Sidebar for Cloudwharf, a cloud provider's console. A Region Select in the header switches between three regions and twelve services in four groups, Compute, Storage, Networking and IAM, each a Collapsible. A service the region does not offer stays in the list, disabled, with the words Not in eu-west, and each group label counts what is offered, for example Networking 2 of 3. The page title carries the region. Built from Sidebar, Select, Collapsible, Badge and Guides, with a CSS entrance only. For cloud and infrastructure consoles where availability depends on a scope.
FAQ
Where does the availability come from?
From a matrix typed at the top of the file: each service lists the regions that offer it. The row state, the group counts and the totals in the status line all derive from it, so they always agree.
Why are unavailable services still listed?
So the list does not change shape when you change region and so people can see what a region lacks. The row stays focusable with aria-disabled, says Not in the region under its name and its accessible name says the same. Choosing it explains in the status line and opens nothing.
What if the service I am on is not offered in the new region?
The page falls back to Virtual machines and the status line says which service was not offered. IAM is global, so its three services are always open and its title says all regions.
What happens when the sidebar folds to icons?
The rail keeps all twelve services as icons with tooltips that name any that are not offered, and shows every group open. The Region select is hidden while folded. 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 regions, the matrix and the resource lists are typed in the file. Fetch the catalog of services per region from your API and keep the selected region in the URL so a link opens the same scope.
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 available service closes the sheet and the page title shows the region. The status line under the page says what happened, and the sheet carries its own copy of it while it is open.