Browse components

SidebarShell

The chrome of a sidebar with the regions left open: width, surface, collapse behaviour and a scrolling middle. Compose the sidebar molecules into it.

organisms

Live example

Default usage you can copy and adapt.

Each region is a snippet handed { collapsed, insetX }, so it matches the shell without re-deriving them.

The props you are most likely to need, with types and defaults.

Props / API
Name	Type	Required	Default	Description
mode	'expanded' \| 'collapsed'	No	expanded	Sidebar display mode; passed to every region as collapsed
layout	'rail' \| 'card'	No	rail	Rail attaches to the viewport edge; card is a rounded floating panel
ariaLabel	string	No	Sidebar navigation	Accessible name for the nav landmark
header	Snippet<[{ collapsed, insetX }]>	No	—	Brand row, search — anything above the scrolling nav area
children	Snippet<[{ collapsed, insetX }]>	No	—	The scrolling middle
footer	Snippet<[{ collapsed, insetX }]>	No	—	Account row, logout, theme toggle — outside the scroll container
class	string	No	—	Extra classes, merged last so they win