Sidebar Blocks
Six whole app shells — a rail beside a panel, a floating card, an action-led column — built on one set of primitives and one set of tokens. These are blocks, not a component: you copy one and edit it rather than configuring it through props, which is why each is a different visual treatment rather than a variant axis. All six are coming soon. For a nav you drive from a route table instead, with sections, nested groups and a renderLink seam, see Sidebar Navigation under Navigation.
Rail and panel
An icon rail pinned beside a labelled panel. Sections are uppercase eyebrows, the current row takes a tinted fill with the brand green reserved for its leading icon, and a search field sits above the first group. Collapsing drops the panel and leaves the rail — which is what a rail is for.
Floating card
One rounded panel raised off the page rather than welded to its edge. The current row is the only one in the set marked by elevation instead of tint — a rim and a shadow, no fill. It stays open: there is no collapsed state, and only the groups below Essentials fold.
With a support footer
The rail-and-panel shell carrying the two things a real product hangs off the bottom: a dismissible support card and an account row. The nav itself is one flat list with no section headings, which is the right shape when every row is a peer.
Action-led
A primary action owns the top of the panel and counts trail every row in the first group. Collapsed, the action survives as a filled icon button — a mail app that hides Compose when it narrows has collapsed away its own premise.
Plan aware
The plan appears twice — on the workspace switcher and in a usage meter at the foot — and the two can never disagree because they read the same state. Past the allowance the meter turns to --destructive and the label carries the true figure into aria-valuetext.
Plan aware, over capacity
The same panel past its allowance. The meter takes --destructive and the figure passes 100 — the bar itself clamps, because translating an indicator beyond its own track is a rendering error rather than a louder warning, but aria-valuetext carries the true number so a screen reader is told what the bar cannot show.
Team shell
A workspace identity leads the panel and an account row closes it, so both ends of the shell open a menu. The current row is marked twice: a tint, and a bar on the panel's own edge.
Pesto UI · 117 documented components