Notification Stack

Notifications that fan out, dismiss and restore

A compact notification center whose cards stack at rest and fan into a readable list on hover, focus or tap. Individual items can be dismissed and restored, with semantic tones and polite live announcements built in.

Preview

Build finished
now
Production is ready to review.
New comment
2m
Maya left feedback on the homepage.
Backup complete
8m
All project files were saved.

Installation

Install the component using the CLI.

npx shadcn@latest add https://rohan.run/r/notification-stack.json

Usage

Import the component:

import { NotificationStack } from "@/components/rohan/notification-stack"

Use it in your code:

<NotificationStack
  label="Recent activity"
  notifications={notifications}
  onDismiss={(notification) => archive(notification.id)}
  onVisibleChange={setVisibleNotifications}
/>

Props

Property	Type	Default	Description
notifications	NotificationStackItem[]	—	Items with titles, descriptions, timestamps, tones and optional actions.
expanded / defaultExpanded	boolean	false	Controlled or initial expanded state.
maxCollapsed	number	4	Maximum number of cards represented in the collapsed stack.
onDismiss	(notification) => void	—	Called after an individual notification is dismissed.
onRestore	(notifications) => void	—	Called when dismissed items are restored.
live	"off" \| "polite" \| "assertive"	"polite"	Live-region politeness for incoming and dismissal announcements.

Components