# Mail Inbox block

> Mail inbox app shell with icon-rail folder sidebar, wide message list, and selected-message action header

Mail and inbox shell: folder icon rail plus a wide 440px message list with live search, filter tabs, rich preview rows, and a selected-message action header (reply, star, delete). ReUI Badge, shadcn Sidebar, Tabs, Avatar, 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-4
- 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-4")`
- Built with: Avatar, Badge, Button, Button Group, Dropdown Menu, Input, Item, Scroll Area, Separator, Sidebar, Tabs, Tooltip
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## Best for

A mail layout whose 440px message list sits inside the sidebar beside a folder icon rail, with All, Unread, Starred and Files tabs

## Agent notes

- Replace `MAILS`, `NAV_FOLDERS` and `USER` in data.tsx; `FEATURED_MAIL_ID` sets the message selected on load
- Folder rail clicks only move the `activeFolderId` highlight; `MailList` reads all of `MAILS` under a fixed Inbox heading in every folder
- The selected mail only sets the `AppHeader` subject over placeholder tiles, and its reply, star, delete and overflow menu actions have no handler

## When not to use

- A mail client with a compose dialog, labels and a separate reading pane: use [Webmail Client](https://web.dev.reui.io/blocks/application/app-shell/app-shell-20.md) (`get_block("app-shell-20")`)
- Settings for connected mailboxes, reply routing and email signatures: use [Mailbox Accounts](https://web.dev.reui.io/blocks/application/profile/profile-4.md) (`get_block("profile-4")`)

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

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