# Notification cards

> Four notification patterns — inbox with tabs, actionable access request, stacked toasts and grouped digest — with sliding tabs, optimistic read states, fanning stacks and springy groups.

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

## Variants

### Inbox

Sliding tabs with live counts, rows that mark read on open, archive with collapse and mark-all-read.

Install: `npx shadcn@latest add @geturui-pro/notification-cards-inbox`

```tsx
import { NotificationInbox } from "@/components/examples/notification-cards/inbox";

export function Bell() {
  return <NotificationInbox items={items} onOpen={open} />;
}
```

| Prop | Type | Default | Description |
|---|---|---|---|
| items | `InboxItem[]` | — | { id, kind: "mention" | "comment" | "review" | "invite", actor, initials, text, target, time, unread }. |
| onOpen | `(item: InboxItem) => void` | — | Called when a row is opened. |
| className | `string` | — | Extra classes on the card. |

### Access request

Pick a role, approve or decline with a pending spinner, then a resolved state with undo.

Install: `npx shadcn@latest add @geturui-pro/notification-cards-actionable`

```tsx
import { ActionableNotification } from "@/components/examples/notification-cards/actionable";

export function Request() {
  return <ActionableNotification requester="Dana Whitfield" resource="Q4 roadmap" onApprove={(role) => grant(role)} />;
}
```

| Prop | Type | Default | Description |
|---|---|---|---|
| requester / initials / email / resource / note / time | `string` | — | Request details. |
| defaultRole | `"viewer" | "commenter" | "editor"` | "commenter" | Preselected access level. |
| onApprove / onDecline | `(role?) => Promise<void> | void` | — | Resolve to confirm; reject to return to idle. |
| onUndo | `() => void` | — | Called when the decision is undone. |
| className | `string` | — | Extra classes on the card. |

### Toast stack

Collapsed deck that fans out on hover or focus; toasts swipe or close away and the rest re-stack.

Install: `npx shadcn@latest add @geturui-pro/notification-cards-toasts`

```tsx
import { ToastStack } from "@/components/examples/notification-cards/toasts";

export function Toaster() {
  const [toasts, setToasts] = useState<StackToast[]>([]);
  return <ToastStack toasts={toasts} onDismiss={(id) => setToasts((t) => t.filter((x) => x.id !== id))} />;
}
```

| Prop | Type | Default | Description |
|---|---|---|---|
| toasts | `StackToast[]` | — | { id, tone: "success" | "info" | "warning", title, body, action? }, oldest first. |
| onDismiss | `(id: string) => void` | — | Pass to control the list yourself. |
| onAction | `(toast: StackToast) => void` | — | Inline action handler. |
| peek | `number` | 2 | Toasts visible behind the front one when collapsed. |
| className | `string` | — | Extra classes on the card. |

### Activity digest

Updates rolled up by day and kind; each group springs open to its events with a staggered reveal.

Install: `npx shadcn@latest add @geturui-pro/notification-cards-digest`

```tsx
import { ActivityDigest } from "@/components/examples/notification-cards/digest";

export function Digest() {
  return <ActivityDigest range="Since Thursday" days={days} />;
}
```

| Prop | Type | Default | Description |
|---|---|---|---|
| title / range | `string` | — | Heading and caption. |
| days | `DigestDay[]` | — | { label, groups: { id, kind, summary, events }[] }. |
| className | `string` | — | Extra classes on the card. |

## Accessibility

- Tabs, disclosures and the access-level picker use native roles; unread state is announced, not only shown as a dot.
- Toasts stay reachable by keyboard: focusing the stack fans it out, and every toast has a labelled dismiss button.
- Status pairs colour with an icon and a word, and reduced motion swaps slides and swipes for fades.

## Source

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