Skip to content
GetUrUI

Notification Center

NewPro
.md

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.

notificationsstackswipedismissiosdraginbox

Installation

Pro installs use your private registry token. Add the @geturui-pro registry once — setup guide. The command works after you get Pro.

$npx shadcn@latest add @geturui-pro/notification-stack

Also installs: Animated Badge, Button

Usage

usage.tsx
1import { NotificationStack } from "@/components/blocks/notification-stack";
2import { MessageCircle, Rocket } from "lucide-react";
3
4export function Inbox() {
5  return (
6    <NotificationStack
7      notifications={[
8        { id: "1", app: "Deploys", title: "Production is live", body: "main · 38s", time: "now", icon: <Rocket className="size-4" />, tone: "volt" },
9        { id: "2", app: "Chat", title: "Ana Ruiz", body: "Looks great, ship it.", time: "3m", icon: <MessageCircle className="size-4" />, tone: "info" },
10      ]}
11      onDismiss={(id) => console.log("dismissed", id)}
12    />
13  );
14}

Props

PropTypeDefaultDescription
notificationsStackNotification[]—{ id, app, title, body, time, icon?, tone? }, newest first. Used as the initial list.
groupedbooleantrueStack per app with a header, or one stack for everything.
expandOnHoverbooleantrueFan a stack out while a mouse is over it. Click and keyboard always work.
peeknumber2How 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.
titlestring"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.

Related

Announcement Bars