# Observability Console block

> Observability app shell with grouped sidebar, pinned pages with Undo and nav search

Monitoring console layout on the shadcn Sidebar: workspace switcher, a Cmd+F nav filter, pinnable pages with Undo, one breadcrumb header and one skeleton card grid as every page body. Card, Empty, Sidebar. For APM and tracing apps.

- Type: Pro block
- Category: [App Shell](https://reui.io/blocks/application/app-shell.md)
- Page: https://reui.io/blocks/application/app-shell/app-shell-36
- Docs (Base UI): https://ui.shadcn.com/docs/components/base/sidebar.md
- Docs (Radix UI): https://ui.shadcn.com/docs/components/radix/sidebar.md
- MCP: `get_block("app-shell-36")`
- Built with: Avatar, Badge, Breadcrumb, Button, Card, Dropdown Menu, Empty, Icon Tile, Input Group, Kbd, Separator, Sheet, Sidebar, Skeleton, Toggle, Tooltip, Tree
- Installs with a ReUI Pro or Ultimate license; setup: https://reui.io/docs/license-setup

## Best for

An observability console layout with grouped nav, a foldable branch, pinnable pages and one shared breadcrumb header over one skeleton body

## Agent notes

- Replace `NAV_GROUPS`, `DASHBOARDS`, `FOOTER_PAGES`, `WORKSPACES` and `USER` in data.tsx but keep the `settings` page; `section` and `parent` feed the breadcrumb
- Render your page in place of `ContentSkeleton`; every page shows it, so route on `page.id`
- Wire `onNavigate`, `onCreateWorkspace`, `onAccountAction` and `onSignOut` from `AppShellProps`; pins and the workspace choice stay local until you persist them

## When not to use

- A fixed icon rail with centered board view tabs over a whiteboard: use [Whiteboard Workspace](https://reui.io/blocks/application/app-shell/app-shell-35.md) (`get_block("app-shell-35")`)
- An AI agents console with project rings and a notifications feed: use [AI Agents Console](https://reui.io/blocks/application/app-shell/app-shell-10.md) (`get_block("app-shell-10")`)

## Third-party libraries

- Headless Tree v1: [API reference](https://headless-tree.lukasbach.com/api/core/), [docs](https://headless-tree.lukasbach.com/getstarted/)
- Sonner v2: [API reference](https://sonner.emilkowal.ski/toast), [docs](https://sonner.emilkowal.ski/getting-started)
- next-themes: [API reference](https://github.com/pacocoursey/next-themes#api), [docs](https://github.com/pacocoursey/next-themes)

## Install

```bash
npx shadcn@latest add @reui/app-shell-36
```

## About App Shell blocks

### When to use

- The outer layout of a multi page product: the navigation around its content area
- Dashboards and admin consoles that switch between workspaces or projects

### When not to use

- One overview page of stats, charts and tables inside your own layout: use the [Dashboard blocks](https://reui.io/blocks/application/dashboard.md)
- A top bar on its own, above a page layout you already have: use the [Navbar blocks](https://reui.io/blocks/application/navbar.md)

### Agent notes

- Shells that switch themes call `useTheme` from next-themes, so the app must mount the next-themes ThemeProvider

Every ReUI item has a twin like this one; the index is https://reui.io/llms.txt. Agents with the ReUI MCP (https://reui.io/docs/mcp) get the same guidance from the getters named above.