shadcn.io is not affiliated with official shadcn/ui
Supply Chain Sidebar Block for Solid
A freight portal in a fixed-height window whose sidebar is a vendor scorecard: ten vendors in a table under three sort buttons, a line that says the order, and a lanes table on the page for the chosen vendor.
Installation
Overview
Rank vendors where you pick them with this supply chain sidebar for Solid with Ark UI. A window framed by a hairline with a plus mark on each corner holds a wide Sidebar whose list is a native table of ten vendors with their on-time share and lead days, under three sort buttons: Name, On time and Lead days. Each button sorts by its column in the natural first direction, names A to Z, on time best first and lead days fastest first, and pressing it again reverses the order. The sorted column carries aria-sort, and one polite line says the order after every press. A vendor's on-time share and lead time are worked out from its three lanes, never typed twice. Choosing a vendor lists its lanes on the page as a real table with each lane's mode, shipments, transit and on-time share. Folded to icons, the rail is a column of mode icons with tooltips; on a phone it is a sheet. The vendors are invented. It's built from Sidebar, Badge, Avatar and Guides, with a CSS entrance only. For vendor lists, carrier scorecards and any sidebar that ranks.
FAQ
How do the sort buttons work?
Each header is a real button inside a th. The first press sorts by that column in its natural direction, and a second press on the same column reverses it. Ties fall back to the vendor's name. The sorted th has aria-sort="ascending" or "descending" and the others have none, and the arrow shows the direction in shape, not colour. The table rebuilds under the header, so focus stays on the button you pressed.
Where do the on-time share and the lead days come from?
From the lanes. A lane holds its transit days, its shipments and how many of them were late; a vendor's share is the shipments that were not late divided by all its shipments, and its lead time is the average transit in days, both rounded. Change a lane and the table, the sort, the badge in the top bar and the sentence under the lanes all follow.
Why a native table in a sidebar?
It is a scorecard, so it needs columns that line up and headers that name them, and a table gives a screen reader both. The vendor name is a button in a row header, with aria-current on the chosen one. Under the table the caption, read only by screen readers, repeats the order.
What happens when the sidebar folds to icons?
The table goes and a column of mode icons takes its place, ship, plane, truck and train, each a link with a tooltip carrying the vendor's name and in the order you sorted. Choosing one opens the vendor on the page. Unfolding brings the table back with the same order.
What stays in the page, and how do I connect it?
Everything. The vendors and their lanes are invented and typed in VENDORS; nothing is looked up or saved, and the block sets persist={false} and shortcut={false} so it writes no cookie. Replace the vendors with yours and the figures follow. In the folded rail the vendors are links to # whose handler shows the vendor instead of navigating.
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 scorecard and its sort buttons are inside it. Choosing a vendor shows its lanes on the page behind, and the status line says which vendor opened.