# NotificationCenter

> Dropdown-anchored notification panel.

- **Level**: organism · **Status**: stable · **Role**: feedback
- **Import**: `import { NotificationCenter, NotificationCenterProvider, NotificationCenterTrigger, NotificationCenterDrawer, NotificationCenterList, NotificationCenterGroup } from "@rrios-forge/ui/organisms/notification-center";`
- **Source**: `packages/ui/src/organisms/notification-center`

App-level notifications surface — bell trigger + side drawer + hook stack. Mount the Provider once, drop the Trigger where it belongs (a rail row in Poesía's frame, ADR-044), mount the Drawer at the shell root, and call `useNotificationsActions().push(...)` from anywhere. Mobile (<md) renders fullscreen with the same right-side slide animation. ADR-015 (Drawer molecule) and ADR-016 (organism refactor) document the rationale.

## Use it for

- Notification center → `NotificationCenter`

## Axes

| Axis | Part | Values | Default | Meaning |
|---|---|---|---|---|
| `tone` | — | `info` `danger` | `danger` | Which semantic colour family the element speaks in. |

## Stories

- [Populated](/?path=/story/components-organisms-notificationcenter--populated) · frame: `/iframe.html?id=components-organisms-notificationcenter--populated&viewMode=story`
- [Empty](/?path=/story/components-organisms-notificationcenter--empty) · frame: `/iframe.html?id=components-organisms-notificationcenter--empty&viewMode=story`
- [Scrolled (12 items)](/?path=/story/components-organisms-notificationcenter--scrolled) · frame: `/iframe.html?id=components-organisms-notificationcenter--scrolled&viewMode=story`
- [With grouping (by day)](/?path=/story/components-organisms-notificationcenter--with-grouping) · frame: `/iframe.html?id=components-organisms-notificationcenter--with-grouping&viewMode=story`
- [Live (Provider + hooks)](/?path=/story/components-organisms-notificationcenter--with-provider) · frame: `/iframe.html?id=components-organisms-notificationcenter--with-provider&viewMode=story`
- [Page (Section in PageShell)](/?path=/story/components-organisms-notificationcenter--page) · frame: `/iframe.html?id=components-organisms-notificationcenter--page&viewMode=story`
- [Page (custom composition)](/?path=/story/components-organisms-notificationcenter--page-custom-composition) · frame: `/iframe.html?id=components-organisms-notificationcenter--page-custom-composition&viewMode=story`
- [Accessibility](/?path=/story/components-organisms-notificationcenter--accessibility) · frame: `/iframe.html?id=components-organisms-notificationcenter--accessibility&viewMode=story`

## Decisions that name it

- ADR-003 — Storybook editorial convention and pattern↔component bidirectionality
- ADR-015 — Drawer molecule on top of Radix Dialog
- ADR-016 — NotificationCenter v2: Popover → Drawer + Provider/Hooks
- ADR-018 — Motion language as a Pattern Layer contract
- ADR-030 — Axis vocabulary: one name, one meaning
- ADR-043 — The default theme is monochrome

## Always

- Tokens only (R04); variants are semantic axes, never appearance (R02).
- Typography and actions are Poesía atoms, never raw HTML with utilities.
- Vibrant panes need a ground and never nest (ADR-027).