# Project Tracker Sidebar block

> Inset sidebar app shell with per-project progress rings and a multi-type notifications popover

Inset collapsible sidebar dashboard shell with workspace switcher, command search, project donut progress rings, usage limit meter, and notifications popover. ReUI Frame, Badge, Rating plus shadcn Sidebar, Popover, DropdownMenu, Progress, Avatar.

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

## Best for

An inset project tracker sidebar with progress rings, a spending limit card and a notifications popover, over a breadcrumb only header

## Agent notes

- Replace `NAV_MAIN`, `ACTIVE_PROJECTS`, `WORKSPACES` and `NOTIFICATIONS` in data.tsx, and the 8,240 of 10,000 spend in `AI_USAGE`
- Each `ACTIVE_PROJECTS` entry hands its `PieProgress` ring a `progress` from 0 to 100 and a Tailwind stroke class as `color`
- The `ITEM_ACTIONS` row menu, Mark all as read, View all notifications and every notification action `Button` have no click handler

## When not to use

- Agents, tools and knowledge sections with an auto refresh switch in the header: use [AI Agents Console](https://web.dev.reui.io/blocks/application/app-shell/app-shell-10.md) (`get_block("app-shell-10")`)
- A dark sidebar listing teammates with online status and an AI credits meter: use [Team Presence Workspace](https://web.dev.reui.io/blocks/application/app-shell/app-shell-9.md) (`get_block("app-shell-9")`)

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

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