{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "notification-feed", "title": "Notification Feed", "description": "Layout-animated notifications as a stack, inbox list, dynamic island or timeline cards, with swipe to dismiss, pausable timers and a useNotifications hook.", "dependencies": [ "motion", "lucide-react" ], "registryDependencies": [ "utils", "https://trytweenly.vercel.app/r/use-reduced-motion.json" ], "files": [ { "path": "registry/new-york/notification-feed/notification-feed.tsx", "content": "\"use client\"\n\nimport {\n useCallback,\n useEffect,\n useEffectEvent,\n useMemo,\n useRef,\n useState,\n type CSSProperties,\n type FocusEvent,\n type MouseEvent,\n type ReactNode,\n type RefObject,\n} from \"react\"\nimport { AnimatePresence, animate, motion, useMotionValue, useTransform, type PanInfo, type Transition } from \"motion/react\"\nimport { Bell, CircleCheck, CircleX, Info, TriangleAlert, X } from \"lucide-react\"\nimport { cn } from \"@/lib/utils\"\nimport { useReducedMotion } from \"@/registry/new-york/hooks/use-reduced-motion\"\n\n/* ---------------------------------------------------------------------- types */\n\nexport type NotificationTone = \"default\" | \"success\" | \"warning\" | \"error\" | \"info\"\nexport type NotificationFeedVariant = \"stack\" | \"list\" | \"island\" | \"cards\"\nexport type NotificationPosition = \"top-right\" | \"top-left\" | \"bottom-right\" | \"bottom-left\" | \"top-center\" | \"bottom-center\"\nexport type NotificationExpand = \"hover\" | \"always\" | \"click\"\n\nexport interface NotificationItem {\n /** Unique identifier. */\n id: string\n /** Main line. */\n title: string\n /** Supporting text, clamped to two lines. */\n description?: string\n /** Custom icon. Defaults to an icon matching the tone. */\n icon?: ReactNode\n /** Avatar image URL. Takes precedence over the icon. */\n avatar?: string\n /** Timestamp label, e.g. \"2m ago\". */\n time?: string\n /** Semantic color. Default: \"default\" */\n tone?: NotificationTone\n /** Optional inline action button. */\n action?: { label: string; onClick: () => void }\n /** Hides the unread dot in the list variant. Default: false */\n read?: boolean\n /** Group heading in the list variant when `grouped` is on. Defaults to \"now\" when unread, \"earlier\" when read. */\n group?: \"now\" | \"earlier\"\n /** Per-item auto-dismiss override in ms (0 disables). */\n duration?: number\n}\n\nexport interface NotificationFeedProps {\n /** Notifications, newest first. */\n items: NotificationItem[]\n /** Called when an item is dismissed by swipe, button or timeout. */\n onDismiss?: (id: string) => void\n /** Layout: Sonner-like stack, inbox list, dynamic island, or timeline cards. Default: \"stack\" */\n variant?: NotificationFeedVariant\n /** Screen corner for the stack and island variants. Default: \"top-center\" */\n position?: NotificationPosition\n /** Positioning context for the stack and island variants. Use \"absolute\" inside a relative container. Default: \"fixed\" */\n strategy?: \"fixed\" | \"absolute\"\n /** When the stack or island opens into a full list. Default: \"hover\" */\n expand?: NotificationExpand\n /** Maximum number of visible items. Default: 4 */\n max?: number\n /** Auto-dismiss delay in ms, paused while hovered. 0 disables. Default: 5000 */\n duration?: number\n /** Space between expanded items in px. Default: 12 */\n gap?: number\n /** Distance from the container edges in px (stack and island). Default: 24 */\n offset?: number\n /** Width of the feed in px. Default: 360 */\n width?: number\n /** Accent for the progress line, unread dots and focus rings. Default: \"#ff4d12\" */\n accent?: string\n /** Corner radius of items in px. Default: 16 */\n radius?: number\n /** List variant: split items under \"Now\" and \"Earlier\" headings. Default: false */\n grouped?: boolean\n /** Allow dragging items sideways to dismiss them. Default: true */\n swipeToDismiss?: boolean\n /** Shown by the list and cards variants when there are no items. Default: \"You're all caught up\" */\n emptyState?: ReactNode\n /** Accessible name of the region. Default: \"Notifications\" */\n label?: string\n className?: string\n}\n\n/* -------------------------------------------------------------------- tokens */\n\nconst EASE_OUT = [0.22, 1, 0.36, 1] as const\nconst spring: Transition = { type: \"spring\", stiffness: 420, damping: 34 }\nconst layoutSpring: Transition = { type: \"spring\", stiffness: 500, damping: 40 }\nconst instant: Transition = { duration: 0 }\nconst PEEK = 12\nconst SHRINK = 0.05\n\nconst TONES: Record = {\n default: { color: null, icon: },\n success: { color: \"#22c55e\", icon: },\n warning: { color: \"#f59e0b\", icon: },\n error: { color: \"#ef4444\", icon: },\n info: { color: \"#3b82f6\", icon: },\n}\n\n/* ---------------------------------------------------------------------- hook */\n\nexport type NotifyInput = Omit & { id?: string }\n\nexport interface UseNotificationsOptions {\n /** Oldest items beyond this count are dropped. Default: 50 */\n limit?: number\n}\n\n/** Local notification store: `notify` prepends, `dismiss` removes, `clear` empties. */\nexport function useNotifications({ limit = 50 }: UseNotificationsOptions = {}) {\n const [items, setItems] = useState([])\n const seq = useRef(0)\n\n const notify = useCallback(\n (input: NotifyInput) => {\n seq.current += 1\n const id = input.id ?? `notification-${seq.current}`\n setItems((prev) => [{ ...input, id }, ...prev.filter((p) => p.id !== id)].slice(0, limit))\n return id\n },\n [limit]\n )\n const dismiss = useCallback((id: string) => setItems((prev) => prev.filter((p) => p.id !== id)), [])\n const clear = useCallback(() => setItems([]), [])\n\n return useMemo(() => ({ items, notify, dismiss, clear }), [items, notify, dismiss, clear])\n}\n\n/* ----------------------------------------------------------------- item body */\n\nfunction Leading({ item, dark }: { item: NotificationItem; dark?: boolean }) {\n const tone = TONES[item.tone ?? \"default\"]\n if (item.avatar) {\n return (\n \n \"\"\n {tone.color && (\n \n )}\n \n )\n }\n const color = tone.color\n return (\n \n {item.icon ?? tone.icon}\n \n )\n}\n\nfunction ItemBody({ item, dark, leading = true, className }: { item: NotificationItem; dark?: boolean; leading?: boolean; className?: string }) {\n const muted = dark ? \"text-white/55\" : \"text-muted-foreground\"\n return (\n
\n {leading && }\n
\n
\n

{item.title}

\n {item.time && {item.time}}\n
\n {item.description &&

{item.description}

}\n {item.action && (\n e.stopPropagation()}\n className={cn(\n \"mt-2.5 inline-flex h-7 items-center rounded-full px-3 text-xs font-medium outline-none transition-colors focus-visible:ring-2 focus-visible:ring-[var(--nf-accent)]\",\n dark ? \"bg-white/10 hover:bg-white/15\" : \"bg-foreground/[0.06] hover:bg-foreground/[0.1]\"\n )}\n >\n {item.action.label}\n \n )}\n
\n
\n )\n}\n\n/* ---------------------------------------------------------------- item shell */\n\ninterface ShellProps {\n item: NotificationItem\n duration: number\n /** Timer and progress run only while active. */\n active: boolean\n paused: boolean\n swipe: boolean\n reduced: boolean\n onDismiss: (id: string) => void\n children: ReactNode\n className?: string\n style?: CSSProperties\n dark?: boolean\n /** Animated height in px; omit to size to content. */\n height?: number\n onHeight?: (id: string, height: number) => void\n hideContent?: boolean\n inert?: boolean\n}\n\nfunction ItemShell({\n item,\n duration,\n active,\n paused,\n swipe,\n reduced,\n onDismiss,\n children,\n className,\n style,\n dark,\n height,\n onHeight,\n hideContent,\n inert,\n}: ShellProps) {\n const x = useMotionValue(0)\n const fade = useTransform(x, [-180, 0, 180], [0, 1, 0])\n const progress = useMotionValue(1)\n const contentRef = useRef(null)\n const [leaving, setLeaving] = useState(false)\n const id = item.id\n\n const expire = useEffectEvent(() => onDismiss(id))\n const measure = useEffectEvent((h: number) => onHeight?.(id, h))\n\n useEffect(() => {\n if (!active || paused || leaving || duration <= 0) return\n const remaining = (progress.get() * duration) / 1000\n const controls = animate(progress, 0, { duration: remaining, ease: \"linear\", onComplete: () => expire() })\n return () => controls.stop()\n }, [active, paused, leaving, duration, progress])\n\n useEffect(() => {\n const el = contentRef.current\n if (!el) return\n const ro = new ResizeObserver(([entry]) => measure(Math.round(entry.borderBoxSize?.[0]?.blockSize ?? entry.contentRect.height)))\n ro.observe(el)\n return () => ro.disconnect()\n }, [])\n\n const onDragEnd = async (_: unknown, info: PanInfo) => {\n const off = info.offset.x\n const v = info.velocity.x\n if (Math.abs(off) > 96 || (Math.abs(v) > 650 && Math.abs(off) > 24)) {\n setLeaving(true)\n const dir = Math.sign(off || v)\n await animate(x, dir * 440, reduced ? instant : { duration: 0.24, ease: EASE_OUT })\n onDismiss(id)\n return\n }\n animate(x, 0, reduced ? instant : spring)\n }\n\n return (\n {\n if ((e.key === \"Delete\" || e.key === \"Backspace\") && e.target === e.currentTarget) onDismiss(id)\n }}\n tabIndex={inert ? -1 : 0}\n aria-hidden={inert || undefined}\n aria-label={item.description ? `${item.title}. ${item.description}` : item.title}\n className={cn(\n \"group/item relative touch-pan-y overflow-hidden outline-none focus-visible:ring-2 focus-visible:ring-[var(--nf-accent)]\",\n swipe && \"cursor-grab active:cursor-grabbing\",\n className\n )}\n style={{ ...style, x, opacity: fade, pointerEvents: inert ? \"none\" : undefined }}\n >\n \n {children}\n \n\n e.stopPropagation()}\n onClick={() => onDismiss(id)}\n className={cn(\n \"absolute right-2.5 top-2.5 grid size-6 place-items-center rounded-full opacity-0 outline-none transition-opacity duration-150\",\n \"focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-[var(--nf-accent)] group-focus-within/item:opacity-100 [@media(hover:hover)]:group-hover/item:opacity-100\",\n dark ? \"bg-white/10 text-white/70 hover:text-white\" : \"bg-foreground/[0.06] text-muted-foreground hover:text-foreground\",\n hideContent && \"hidden\"\n )}\n >\n \n \n\n {active && duration > 0 && !hideContent && (\n \n )}\n \n )\n}\n\n/* ------------------------------------------------------------------ variants */\n\ninterface ViewProps {\n items: NotificationItem[]\n onDismiss: (id: string) => void\n max: number\n duration: number\n gap: number\n radius: number\n paused: boolean\n expanded: boolean\n swipe: boolean\n reduced: boolean\n emptyState: ReactNode\n grouped: boolean\n vertical: \"top\" | \"bottom\"\n horizontal: \"left\" | \"right\" | \"center\"\n areaRef: RefObject\n bind: AreaHandlers\n}\n\ninterface AreaHandlers {\n onPointerEnter: () => void\n onPointerLeave: () => void\n onFocus: (e: FocusEvent) => void\n onBlur: (e: FocusEvent) => void\n onClick?: (e: MouseEvent) => void\n}\n\nconst itemDuration = (item: NotificationItem, fallback: number) => item.duration ?? fallback\n\nfunction StackView({ items, onDismiss, max, duration, gap, radius, paused, expanded, swipe, reduced, vertical, areaRef, bind }: ViewProps) {\n const [heights, setHeights] = useState>({})\n const onHeight = useCallback((id: string, h: number) => setHeights((prev) => (prev[id] === h ? prev : { ...prev, [id]: h })), [])\n\n const s = vertical === \"bottom\" ? -1 : 1\n const count = Math.min(items.length, max)\n const heightOf = (i: number) => heights[items[i]?.id] ?? 72\n const front = heightOf(0)\n\n const offsets: number[] = []\n let acc = 0\n for (let i = 0; i < items.length; i++) {\n offsets.push(acc)\n if (i < count) acc += heightOf(i) + gap\n }\n const expandedH = Math.max(0, acc - gap)\n const listH = count === 0 ? 0 : expanded ? expandedH : front + (count - 1) * PEEK\n\n return (\n \n
    \n \n {items.map((item, i) => {\n const hidden = i >= max\n const depth = Math.min(i, max - 1)\n const collapsedBack = !expanded && i > 0\n const target = hidden\n ? { y: s * (expanded ? offsets[count - 1] ?? 0 : depth * PEEK), scale: 1 - depth * SHRINK, opacity: 0 }\n : expanded\n ? { y: s * offsets[i], scale: 1, opacity: 1 }\n : { y: s * i * PEEK, scale: 1 - i * SHRINK, opacity: 1 }\n return (\n \n \n \n \n \n )\n })}\n \n
\n \n )\n}\n\nconst contentSwap = {\n initial: { opacity: 0, scale: 0.92, filter: \"blur(6px)\" },\n animate: { opacity: 1, scale: 1, filter: \"blur(0px)\" },\n exit: { opacity: 0, scale: 0.92, filter: \"blur(6px)\" },\n}\n\nfunction IslandView({ items, onDismiss, max, duration, radius, paused, expanded, swipe, reduced, horizontal, areaRef, bind }: ViewProps) {\n const idle = items.length === 0\n const current = items[0]\n const mode = idle ? \"idle\" : expanded ? \"list\" : \"single\"\n const swapTransition: Transition = reduced ? instant : { duration: 0.32, ease: EASE_OUT, delay: 0.06 }\n\n return (\n
\n \n \n {mode === \"idle\" && (\n \n \n \n )}\n\n {mode === \"single\" && current && (\n \n \n \n \n {items.length > 1 && (\n \n +{items.length - 1}\n \n )}\n \n )}\n\n {mode === \"list\" && (\n \n \n {items.slice(0, max).map((item, i) => (\n 0 && \"border-t border-white/[0.07]\")}\n >\n \n \n \n \n ))}\n \n {items.length > max && (\n
  • +{items.length - max} more
    • \n )}\n     \n )}\n     \n \n
    \n )\n}\n\ntype Entry = { kind: \"heading\"; key: string; label: string } | { kind: \"item\"; key: string; item: NotificationItem; index: number }\n\nfunction ListView({ items, onDismiss, max, duration, radius, paused, swipe, reduced, emptyState, grouped, areaRef, bind }: ViewProps) {\n const visible = items.slice(0, max)\n const entries: Entry[] = []\n if (grouped) {\n const groupOf = (n: NotificationItem) => n.group ?? (n.read ? \"earlier\" : \"now\")\n for (const g of [\"now\", \"earlier\"] as const) {\n const members = visible.filter((n) => groupOf(n) === g)\n if (!members.length) continue\n entries.push({ kind: \"heading\", key: `heading-${g}`, label: g === \"now\" ? \"Now\" : \"Earlier\" })\n for (const item of members) entries.push({ kind: \"item\", key: item.id, item, index: visible.indexOf(item) })\n }\n } else {\n visible.forEach((item, index) => entries.push({ kind: \"item\", key: item.id, item, index }))\n }\n const transition = reduced ? instant : layoutSpring\n\n return (\n \n
      \n \n {entries.map((entry, i) =>\n entry.kind === \"heading\" ? (\n 0 && \"border-t\")}\n >\n {entry.label}\n \n ) : (\n 0 && entries[i - 1]?.kind === \"item\" && \"border-t\")}\n >\n \n {!entry.item.read && (\n \n )}\n \n \n \n )\n )}\n {items.length > max && (\n \n {items.length - max} more\n \n )}\n {items.length === 0 && (\n \n \n {emptyState}\n \n )}\n \n
    \n \n )\n}\n\nfunction CardsView({ items, onDismiss, max, duration, gap, radius, paused, swipe, reduced, emptyState, areaRef, bind }: ViewProps) {\n const visible = items.slice(0, max)\n const transition = reduced ? instant : layoutSpring\n\n return (\n \n \n
      \n \n {visible.map((item, i) => (\n \n \n \n \n \n \n \n \n ))}\n {items.length === 0 && (\n \n \n \n \n {emptyState}\n \n )}\n \n
    \n     \n )\n}\n\n/* ------------------------------------------------------------ NotificationFeed */\n\nexport function NotificationFeed({\n items,\n onDismiss,\n variant = \"stack\",\n position = \"top-center\",\n strategy = \"fixed\",\n expand = \"hover\",\n max = 4,\n duration = 5000,\n gap = 12,\n offset = 24,\n width = 360,\n accent = \"#ff4d12\",\n radius = 16,\n grouped = false,\n swipeToDismiss = true,\n emptyState = \"You're all caught up\",\n label = \"Notifications\",\n className,\n}: NotificationFeedProps) {\n const reduced = useReducedMotion()\n const areaRef = useRef(null)\n const [hovered, setHovered] = useState(false)\n const [focused, setFocused] = useState(false)\n const [clicked, setClicked] = useState(false)\n\n // The area can vanish under the pointer when the last item leaves; start fresh next time\n if (items.length === 0 && (hovered || focused || clicked)) {\n setHovered(false)\n setFocused(false)\n setClicked(false)\n }\n\n useEffect(() => {\n if (expand !== \"click\" || !clicked) return\n const onDown = (e: PointerEvent) => {\n if (!areaRef.current?.contains(e.target as Node)) setClicked(false)\n }\n document.addEventListener(\"pointerdown\", onDown)\n return () => document.removeEventListener(\"pointerdown\", onDown)\n }, [expand, clicked])\n\n const dismiss = useCallback((id: string) => onDismiss?.(id), [onDismiss])\n const expanded = expand === \"always\" || (expand === \"hover\" ? hovered || focused : clicked)\n const paused = hovered || focused || (expand === \"click\" && clicked)\n\n const bind: AreaHandlers = {\n onPointerEnter: () => setHovered(true),\n onPointerLeave: () => setHovered(false),\n onFocus: (e) => {\n if (e.target.matches(\":focus-visible\")) setFocused(true)\n },\n onBlur: (e) => {\n if (!e.currentTarget.contains(e.relatedTarget as Node | null)) setFocused(false)\n },\n onClick:\n expand === \"click\"\n ? (e) => {\n if ((e.target as HTMLElement).closest(\"button\")) return\n setClicked((c) => !c)\n }\n : undefined,\n }\n\n const vertical = position.startsWith(\"top\") ? \"top\" : \"bottom\"\n const horizontal = position.endsWith(\"left\") ? \"left\" : position.endsWith(\"right\") ? \"right\" : \"center\"\n const floating = variant === \"stack\" || variant === \"island\"\n\n const view: ViewProps = {\n items,\n onDismiss: dismiss,\n max: Math.max(1, max),\n duration,\n gap,\n radius,\n paused,\n expanded,\n swipe: swipeToDismiss,\n reduced,\n emptyState,\n grouped,\n vertical,\n horizontal,\n areaRef,\n bind,\n }\n\n const accentVar = { \"--nf-accent\": accent } as CSSProperties\n const content =\n variant === \"stack\" ? (\n \n ) : variant === \"island\" ? (\n \n ) : variant === \"list\" ? (\n \n ) : (\n \n )\n\n if (!floating) {\n return (\n
    \n {content}\n
    \n )\n }\n\n const place: CSSProperties =\n horizontal === \"center\" ? { left: \"50%\", transform: \"translateX(-50%)\" } : { [horizontal]: offset }\n\n return (\n \n
    {content}
    \n \n )\n}\n", "type": "registry:component" } ], "docs": "Docs, live playground and every prop: https://trytweenly.vercel.app/docs/components/notification-feed", "type": "registry:component" }