Sidebar 3

A Notion-style app shell (shadcn sidebar-10 layout) — brand header with a row of rounded icon tabs up top, favorites + collapsible workspaces in the body, and the theme switcher + user menu in the footer.

Installation

$Terminal

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

Usage

Mount the demo shell at full viewport height.

TSImport

import { Sidebar3Demo } from "@/components/blocks/sidebar-3-block";

TSExample

import { Sidebar3Demo } from "@/components/blocks/sidebar-3-block";

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

Composition

Slot layout of the Notion-style sidebar-10 shell.

Sidebar3 (Notion-style sidebar-10 shell)
├── SidebarHeader
│   ├── Brand        (logo + name)
│   └── Tabs         (variant="rounded" — icon tabs, active expands)
├── SidebarContent
│   ├── NavFavorites (flat list)
│   └── NavWorkspaces(collapsible tree)
└── SidebarFooter
    ├── ThemeSwitcher (segmented light/dark/system)
    └── UserMenu      (avatar + dropdown)

Preview

Click “Open fullscreen” to interact with the full app shell. The rounded tabs at the top drive the main view; the active tab expands into a labelled pill.

API Reference

Props for the Sidebar3 shell.

Prop	Type	Default	Description
`activeTab`	string	—	Controlled value of the rounded top-nav tabs.
`onTabChange`	(value: string) => void	—	Fires when a top-nav tab is selected.
`brand`	string	"Church Media Squad"	Brand text shown next to the logo.
`logoSrc`	string	"/sqd-logo.png"	Logo image source.
`logoAlt`	string	—	Logo alt text. Defaults to the brand string.