# Pinnable Favorites Nav block

> Dark full-width topbar app shell with workspace switcher, pinnable sidebar nav, and favorites

Dashboard shell with a fixed dark topbar over an icon-collapsible sidebar: workspace switcher, pin/unpin nav with badges, favorites group, gradient Upgrade menu, team avatars. ReUI Badge, shadcn Sidebar, DropdownMenu, Avatar, Button, Card.

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

## Best for

A thin dark top bar with Upgrade and New menus over a sidebar whose More menu pins and unpins nav items above a favorites group

## Agent notes

- Replace `SIDEBAR_NAV`, `FAVORITES`, `WORKSPACES` and `HEADER_USERS` in data.tsx; each `pinnable` item with `pinned` set starts in the sidebar
- Pins live in local `pinnedIds` state and reset on reload, so persist them per user
- Items in `UpgradeMenu`, `NewMenu`, `HelpMenu` and `ItemActionMenu`, Unpin From Sidebar included, plus Reports, Invite and Help have no handler

## When not to use

- Pinned infrastructure resources such as an API gateway and a database: use [Icon Rail Dashboard](https://web.dev.reui.io/blocks/application/app-shell/app-shell-1.md) (`get_block("app-shell-1")`)
- Account settings with vertical tabs and a searchable team members table: use [Account & Team Settings](https://web.dev.reui.io/blocks/application/profile/profile-1.md) (`get_block("profile-1")`)

## Install

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

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