shadcn.io is not affiliated with official shadcn/ui
Inventory Manager Sidebar Block for Ark UI
A stock-control window with a slim rail and an Alert below slider: eighteen SKUs, a low-stock count on every view that follows the slider, a table with a level bar and Reorder low items.
Installation
Overview
Give a stock-control app its whole shell with this inventory manager sidebar for React with Ark UI. A window framed by a hairline with a plus mark on each corner holds the Sidebar, set slim at 13rem, and above its views sits a Slider that reads "Alert below N units" from 0 to 50. Eighteen typed SKUs fall into four categories, and Low stock and each category carry a badge with how many of their SKUs are under the line; drag the slider and every badge, the page and the status line count again. Beside it, the top bar names the open view and holds Reorder low items, a Shine Button and the only colored control. The page is a table of the view's SKUs, fewest units first, each with its code, its units and a small level bar with the alert line marked on it; items under the line say "low" in words and in weight. Reorder drafts a list for the low items in view and marks them "on order". The rail collapses to icons with tooltips, and below the medium breakpoint it becomes a sheet. It's built from Sidebar, Slider, Empty, Avatar, Shine Button and Guides, with a CSS entrance only. For stock control, parts rooms, shops and any sidebar that needs one live control next to its links.
FAQ
Where do the badges come from?
From SKUS, the 18 typed items at the top of the file, each with a category and a quantity. An item is low when its quantity is under the slider's value, and a badge is the number of low items in that view. The badge is hidden at zero, and a link's name says it in words ("Hardware, 3 SKUs below 12"). Nothing is typed twice: the slider is the only input, and the rail, the table and the status line all read it. In your app, load the same shape from your stock system and keep the rule.
How does the slider work?
It is a catalog Slider with one thumb, a step of one unit and a range of 0 to 50, so it takes the arrow keys, Home, End and Page Up and Down. Its value text reads "12 units" to a screen reader, and the same number shows beside it. At 0 nothing is low and the Low stock view shows an empty state. The slider lives in the rail, so it hides when the rail folds to icons; the badges stay on the icons' tooltips.
What stays in the page, and how do I connect it?
Everything. Reorder low items marks the low SKUs in the open view as on order, in the block's own state; nothing is sent to a supplier and reloading starts over. When nothing is low, or everything low is already on order, the button stays pressable and the status line says why. Replace the handler with a call to your purchasing API. The views are links to # whose handler shows the table instead of navigating. They're SidebarMenuButtons with asChild around an a element. Point them at your routes and mark the current one with isActive.
How does it work on a phone?
Below the medium breakpoint the sidebar becomes a sheet that the menu button in the top bar opens from the start edge, the right in a right-to-left layout. The slider and the views are in it. Escape or choosing a view closes the sheet and focus goes back to the menu button. The first screen is the table with its caption of counts, the level bars give way to the words "low" and "on order", and the button keeps its label short. The window keeps its height and only the table scrolls.
What is the level bar?
A small track on each row, filled to the item's units out of 50, with a tick where the alert line is. A fill that stops short of the tick is a low item, and the word "low" and the heavier number say the same, so the state never depends on the bar alone. The bar is decoration for sighted users and is hidden from assistive technology, which gets the units and the word instead.
Is it accessible?
The sidebar is a navigation landmark named after the product, each group of views is named by its label and the open view is marked as the current page. The slider has a name, a value text and full keyboard control. The table has a caption that counts the low items, column heads and a word on every low row. One polite status line reports each change, and counts are isolated so they read in order in a right-to-left layout.