Notification Stack

Component 4

About

A persistent notification centre whose stacked items collapse into a pile with peeking edges, fanning apart when pulled and closing again with drag-to-dismiss cards.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Notification Stack to your project and fits it to your theme.

Code

How Notification Stack is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import {
  NotificationStack,
  type NotificationItem,
} from "@/components/ui/notification-stack";
import { useState } from "react";
import { AlertTriangle, ServerCog, ShieldCheck } from "lucide-react";

import { Button } from "@/components/ui/button";

const seed: NotificationItem[] = [
  {
    id: "alert",
    icon: <AlertTriangle />,
    title: "p99 latency above 800ms",
    meta: "now",
    body: "eu-west-1, firing for 4 minutes.",
  },
  {
    id: "deploy",
    icon: <ServerCog />,
    title: "Rollback completed",
    meta: "6m",
    body: "Reverted to build 1839.",
  },
  {
    id: "audit",
    icon: <ShieldCheck />,
    title: "Access review due",
    meta: "3h",
    body: "11 accounts still unattested.",
  },
];

export default function NotificationStackClearingExample() {
  const [items, setItems] = useState(seed);
  const [expanded, setExpanded] = useState(true);

  return (
    <div className="flex w-full max-w-sm flex-col gap-5">
      <div className="flex h-[296px] items-center">
        <NotificationStack
          className="w-full"
          label="Incidents"
          notifications={items}
          expanded={expanded}
          onExpandedChange={setExpanded}
          onDismiss={(id) =>
            setItems((current) => current.filter((item) => item.id !== id))
          }
          emptyState="All clear. Nothing needs you."
        />
      </div>
      <div className="flex gap-2">
        <Button
          variant="outline"
          size="sm"
          onClick={() => setItems([])}
          disabled={!items.length}
        >
          Clear all
        </Button>
        <Button variant="ghost" size="sm" onClick={() => setItems(seed)}>
          Reset
        </Button>
      </div>
    </div>
  );
}