shadcn.io is not affiliated with official shadcn/ui
Supply Chain Sidebar Block for React
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 React with Base 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. They're 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. 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.
Related
- Pro
HR Portal Sidebar
App contentAn HR portal in a fixed-height window whose sidebar is a people directory: 24 people under sticky letter headings with an A to Z rail that jumps to a letter, and a card for the chosen person with a manager button.
- Pro
Email Client Sidebar
App contentA mail client in a fixed-height window: mailboxes and labels whose counts follow the mail you file, a searchable message list beside the open message, and Compose for a local draft.
- Pro
Emoji Labels Sidebar
App contentA team wiki in a fixed-height window whose muted sidebar gives every page a glyph you choose from a popover of eight named icons, shown in the rail and in the page title, with a Reset icons button.
- Pro
A project workspace in a fixed-height window whose sidebar rows each hold Pin, Duplicate and Archive buttons, with a real Undo in the footer that puts an archived project back in its old place.
- Pro
A blogging platform in a fixed-height window whose slim sidebar opens with a Recently edited group of up to four pages, a Clear button and a draft count on Posts, above four admin groups.
- Pro
Collapsible Groups Sidebar
Folds and treesA framework's docs in a fixed-height window whose slim sidebar has five groups that fold from their labels, with Expand all and Collapse all, a count of open groups and a dot on a folded group that holds the current page.