# Notification Center

> A notification center that groups cards per app under a count badge; groups fan open on hover or click and each card swipes sideways to dismiss with a spring fling.

- Collection: Blocks
- Tier: pro
- Docs: https://geturui.com/docs/notification-stack
- Install: `npx shadcn@latest add @geturui-pro/notification-stack`
- Dependencies: motion, lucide-react

## Usage

```tsx
import { NotificationStack } from "@/components/blocks/notification-stack";
import { MessageCircle, Rocket } from "lucide-react";

export function Inbox() {
  return (
    <NotificationStack
      notifications={[
        { id: "1", app: "Deploys", title: "Production is live", body: "main · 38s", time: "now", icon: <Rocket className="size-4" />, tone: "volt" },
        { id: "2", app: "Chat", title: "Ana Ruiz", body: "Looks great, ship it.", time: "3m", icon: <MessageCircle className="size-4" />, tone: "info" },
      ]}
      onDismiss={(id) => console.log("dismissed", id)}
    />
  );
}
```

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| notifications | `StackNotification[]` | — | { id, app, title, body, time, icon?, tone? }, newest first. Used as the initial list. |
| grouped | `boolean` | true | Stack per app with a header, or one stack for everything. |
| expandOnHover | `boolean` | true | Fan a stack out while a mouse is over it. Click and keyboard always work. |
| peek | `number` | 2 | How many cards peek out under a collapsed stack. |
| onDismiss | `(id: string) => void` | — | Called for every dismissed card (swipe, Delete key, close button, clear). |
| onOpen | `(notification) => void` | — | Called when an expanded card is activated. |
| onClearAll | `() => void` | — | Called by the Clear all button. |
| title | `string` | "Notifications" | Heading above the stacks. |

## Accessibility

- Each card is a button with a full spoken label (app, title, body, time); hidden cards in a collapsed stack leave the tab order.
- Delete or Backspace dismisses the focused card; Escape collapses an expanded stack; every card also has a labelled close button.
- Show all / Show less toggles carry aria-expanded; the swipe fling becomes a fade under reduced motion.

## Source

Pro item — send `Authorization: Bearer <registry token>` to include the source.