Sidebar 2

The shadcn sidebar-2 app shell — collapsible sidebar with team switcher, nav groups, projects, and a user block. This is the same shell Squad UI itself uses.

Installation

$Terminal

npx shadcn@latest add https://sdk-components.thesqd.com/r/sidebar-2-block.json

Usage

Mount the demo shell at full viewport height.

TSImport

import { Sidebar2Demo } from "@/components/blocks/sidebar-2-block";

TSExample

import { Sidebar2Demo } from "@/components/blocks/sidebar-2-block";

export function AppShell() {
  return (
    <div className="h-screen w-full">
      <Sidebar2Demo />
    </div>
  );
}

Composition

Slot layout of the shadcn sidebar-2 shell.

Sidebar2 (shadcn sidebar-2 shell)
├── SidebarHeader
│   └── TeamSwitcher
├── SidebarContent
│   ├── NavMain     (primary sections)
│   └── NavProjects (secondary sections)
└── SidebarFooter
    └── NavUser     (avatar + dropdown)

Preview

Click “Open fullscreen” to interact with the full app shell in a fullscreen dialog.

API Reference

Props for the Sidebar2 shell.

Prop	Type	Default	Description
`teams`	Team[]	—	Workspaces shown in the team switcher.
`navMain`	NavGroup[]	—	Primary nav sections rendered at the top.
`navProjects`	NavItem[]	—	Secondary list rendered below the primary nav.
`user`	{ name: string; email: string; avatar?: string }	—	Current user shown in the footer.
`collapsible`	"icon" \| "offcanvas" \| "none"	"icon"	Collapse behavior on small viewports.