shadcn.io is not affiliated with official shadcn/ui
Ecommerce Admin Sidebar Block for Radix UI
A store admin in a fixed-height window whose inset sidebar opens with a Needs attention group derived from four flags and lowers the owning page's badge as each one is marked handled.
Installation
Overview
Put the day's problems first with this ecommerce admin sidebar for React with Radix UI. A window framed by a hairline with a plus mark on each corner holds an inset Sidebar for Cartmoor, a store admin, beside a raised page. A Needs attention group tops the rail and is derived from four typed flags, two low-stock products, an unfulfilled order and a refund request, above Catalog, Sales and Analytics. Opening a flag shows its facts with a Mark handled button, which removes it from the group and lowers the badge on the page that owns it. At zero the group says Nothing needs attention. Built from Sidebar, Sidebar Menu Badge, Button and Guides, with a CSS entrance only. For store back offices and any rail that should lead with what needs doing.
FAQ
How is the group derived?
From a typed list of flags, each naming the page that owns it. The rows in Needs attention are the flags not yet handled, and each badge counts the open flags its page owns, so marking one handled lowers both together.
What does Mark handled do?
It removes the flag, opens the page that owns it, lowers its badge and moves focus to the page so the keyboard is not left on a button that has gone. The status line names what was handled and how many remain.
What shows when nothing needs attention?
The group keeps its place with one quiet line, Nothing needs attention, and the badges disappear. The flags come back when the window is reloaded.
What happens when the sidebar folds to icons?
The rail keeps the rows as icons with tooltips that include the count, and the inset panel grows to fill the space. There is no SidebarInset, so the page is a plain element that wears its classes. 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 flags and lists are typed in the file and handling a flag only changes this window. Derive the flags from your inventory and orders data and store who handled each one.
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 a flag or a page closes the sheet; the badges are in the sheet and the status line says what changed. The status line under the page says what happened, and the sheet carries its own copy of it while it is open.