Notification Triage Panel

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

<NotificationTriagePanel/>

    </div>
  );
}

Installation

npx webberui@latest add https://webberui.com/r/notification-triage-panel.en.json

Usage

import {
  NotificationTriagePanel,
  type TriageNotification,
} from "@/components/ui/notification-triage-panel";

const notifications: TriageNotification[] = [
  {
    id: "1",
    title: "Aria mentioned you",
    description: "Replied to your comment in the thread.",
    source: "Slack",
    accent: "violet",
    timestamp: Date.now() - 4 * 60_000,
  },
  {
    id: "2",
    title: "PR #482 is waiting for your review",
    source: "GitHub",
    accent: "green",
    read: true,
    timestamp: Date.now() - 42 * 60_000,
  },
];

export function Example() {
  const [items, setItems] = React.useState(notifications);

  return (
    <NotificationTriagePanel
      notifications={items}
      onNotificationsChange={setItems}
      groupBy="date"
    />
  );
}

Without notifications, use defaultNotifications to enter uncontrolled mode, where the component manages the cleared and read states itself.

Props

NotificationTriagePanel

TriageNotification

How the animation works

• Sequenced sweep-out: on a bulk clear (a whole group, or "clear all") the items slide out to the right in display order with a stagger; only after they have left does the height spring closed, and the items below flow up into the gap.
• Group collapse and backfill: once a whole group is empty, the group block itself springs its height closed and the groups below rise naturally to fill in. Clicking a group header collapses or expands it, with the content height using the same spring transition.
• One at a time: clicking an item marks it as read (in the unread tab it fades out and collapses); on hover or focus a clear button appears on the right, and clearing a single item sweeps out the same way.
• Tuning points: both the collapse spring and the sweep duration can be influenced through tokens such as var(--wb-duration-fast,200ms), which also drive the transition colors.

Accessibility

• The panel is a role="region", the tab strip a role="tablist", and the tab buttons carry aria-selected and support ← → to switch.
• Group header buttons carry aria-expanded and aria-controls, so collapsing works from the keyboard.
• The body of each notification is a button (mark as read) and the clear button is separate with its own aria-label, avoiding nested interactive elements.
• When the user has "reduce motion" enabled at the system level, the sweep offsets and springs are replaced by a brief fade in / fade out, with no effect on how it is operated.