# Fleet Operator Console block

> Photo banner app shell with crossfading hero images, pixel dissolve, glass icon rail and pill nav

Fleet operator console: sticky rail with a Robots section menu and account menu, a sonner access-request toast (host mounts Toaster), Sheet drawer below lg. shadcn Sidebar, DropdownMenu, Tooltip, ToggleGroup. Hero header dashboard, SaaS layout.

- 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-22
- 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-22")`
- Built with: Avatar, Button, Card, Dropdown Menu, Sheet, Sidebar, Skeleton, Toggle Group, Tooltip
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## Best for

A band of 6 crossfading photos that ends in a pixel dissolve, under a glass icon rail, a centered pill nav and an access request toast

## Agent notes

- Replace `HERO_SLIDES` with your own photographs, 1440x444 or wider, each shipped at every width its `widths` list names
- `AccessToast` is raised with `toast.custom` and shows only where the host mounts a sonner Toaster; Allow and Dismiss just call `toast.dismiss`
- `railSection` and `navSection` only mark the current item, and `WorkspaceContent` is skeleton cards to swap for your page

## When not to use

- A toast notification on its own, with no page layout around it: use [Sonner](https://web.dev.reui.io/components/sonner.md) (`get_component("sonner")`)

## Third-party libraries

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

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