Sidebar

The app shell's primary nav: 240px (--sidebar-w) collapsing to a 56px icon rail, sidebar fill (a surface-2 alias) on a hairline, no shadow. The current section is primary text plus a 2px primary edge, never a filled pill, and carries aria-current="page". On touch devices (phones and tablets, any orientation) and below 768px it becomes a Sheet overlay; fine-pointer devices from 768px get the push panel.

<SidebarProvider>
  <Sidebar collapsible="icon">
    <SidebarContent>
      <SidebarMenu>
        <SidebarMenuItem>
          <SidebarMenuButton isActive>Marketplace</SidebarMenuButton>
        </SidebarMenuItem>
      </SidebarMenu>
    </SidebarContent>
  </Sidebar>
  <SidebarInset>
    <SidebarTrigger />
  </SidebarInset>
</SidebarProvider>

Icon rail

Press ⌘B or the trigger to collapse to the 56px rail.

Floating

The floating variant detaches from the edge: rounded corners, a border, a soft shadow.

Inset

The inset variant keeps its own panel flat; the rounded border lives on the inset content instead.

Anatomy

Rail, loading skeleton, a group action and a row action, a separator, and the right-side offcanvas variant.