# Environment Switcher block

> Breadcrumb-switcher sidebar app shell with org/app/environment dropdowns and a live system monitor popover

Header-first shell with a breadcrumb of org, app, and environment switcher dropdowns, a live system monitor popover with resource sparklines, command-palette search, and collapsible nested sidebar nav. shadcn Badge, Kbd, Sidebar, DropdownMenu.

- 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-7
- 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-7")`
- Built with: Avatar, Badge, Breadcrumb, Button, Dialog, Dropdown Menu, Input, Item, Kbd, Popover, Progress, Sidebar
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## Best for

A full width header with org, app and environment switchers, a system monitor popover that ticks every second and swipeable news cards

## Agent notes

- Replace `WORKSPACES`, `APPS`, `ENVIRONMENTS`, `NAV_MAIN` and `NEWS_ARTICLES`; each article `href` opens in a new tab and keys its dismissal
- `SystemStats` fakes live data: from mount a `setInterval` jitters `RESOURCE_METRICS` and `AGENTS` with a seeded random every `UPDATE_INTERVAL_MS`
- `OrgSwitcher`, `AppSwitcher` and `EnvironmentSwitcher` change local state only, and Create Organization and Create Application have no handler

## When not to use

- The same org, product and environment crumbs over an icon rail and a second nav column: use [Inventory Admin](https://web.dev.reui.io/blocks/application/app-shell/app-shell-8.md) (`get_block("app-shell-8")`)
- A top bar with a product launcher grid and notifications above a page toolbar and footer: use [Apps Grid Header](https://web.dev.reui.io/blocks/application/app-shell/app-shell-12.md) (`get_block("app-shell-12")`)

## Third-party libraries

- 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-7
```

## 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.