# Security Scope Console block

> Security console app shell with icon scope tabs and a drag-to-reorder collapsible scope tree

SOC dashboard layout: top bar with workspace picker, section pills, Cmd+K search, notifications feed and Run Scan; add or duplicate scopes. ReUI Sortable, Badge, Rating; shadcn Sidebar, Tabs, Drawer, Popover. SIEM, threat monitoring, admin UI.

- Type: Pro block
- Category: [App Shell](https://web.dev.reui.io/blocks/application/app-shell.md)
- Page: https://web.dev.reui.io/blocks/application/app-shell/app-shell-26
- 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-26")`
- Built with: Avatar, Badge, Button, Button Group, Card, Collapsible, Dialog, Drawer, Dropdown Menu, Empty, Input, Popover, Progress, Rating, Separator, Sidebar, Skeleton, Sortable, Spinner, Tabs, Tooltip
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## Best for

Section pills and a Run Scan button in the top bar, over icon scope tabs that add or duplicate up to 7 scopes of reorderable trees

## Agent notes

- Replace the demo `SCOPES` trees, `WORKSPACES` and `NOTIFICATIONS` in data.tsx with your own security inventory and alert feed
- `RunScanButton` only shows a `Spinner` for `SCAN_MS` and starts no scan, so wire it to your scan job
- The `SearchMenu` dialog input has no change handler and lists no results, so connect it to your scope search

## When not to use

- A single reorderable list inside a page, with no shell or navigation around it: use [Sortable](https://web.dev.reui.io/components/sortable.md) (`get_component("sortable")`)
- A console that keeps its routes in a searchable sidebar and has no top bar: use [Route Search Sidebar](https://web.dev.reui.io/blocks/application/app-shell/app-shell-27.md) (`get_block("app-shell-27")`)

## Third-party libraries

- Headless Tree v1: [API reference](https://headless-tree.lukasbach.com/api/core/), [docs](https://headless-tree.lukasbach.com/getstarted/)
- next-themes: [API reference](https://github.com/pacocoursey/next-themes#api), [docs](https://github.com/pacocoursey/next-themes)
- dnd kit v6: [API reference](https://dndkit.com/legacy/api-documentation/context-provider/dnd-context/), [docs](https://dndkit.com/legacy/introduction/getting-started/), through ReUI Sortable (these are the Legacy docs; dndkit.com's default docs cover the newer @dnd-kit/react, a different API)

## Install

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

## 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://web.dev.reui.io/blocks/application/dashboard.md)
- A top bar on its own, above a page layout you already have: use the [Navbar blocks](https://web.dev.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://web.dev.reui.io/llms.txt. Agents with the ReUI MCP (https://web.dev.reui.io/docs/mcp) get the same guidance from the getters named above.