Notification Stack

Component 22

About

A compact stack of notification cards that peeks as a summary badge and springs open into a readable list on hover, focus or tap.

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 { RotateCw } from "lucide-react";
import { NotificationStack } from "@/components/ui/notification-stack";
import type { NotificationStackItem } from "@/components/ui/notification-stack";

const notifications: NotificationStackItem[] = [
  {
    id: "import-failed",
    title: "Orders import failed",
    description: "42s · TimeoutError at Step 2",
    trailing: (
      <span className="inline-flex items-center gap-1 text-amber-500 dark:text-amber-400">
        <RotateCw className="h-3.5 w-3.5" aria-hidden="true" />2
      </span>
    ),
  },
  {
    id: "sla-breach",
    title: "SLA breach",
    description: "2m 11s · Data enrichment",
  },
  {
    id: "sync-fixed",
    title: "Product sync auto-fixed",
    description: "5m · 404 on GET /products",
  },
];

function NotificationStackPreview() {
  return (
    <div className="flex w-full items-center justify-center pt-52 pb-6">
      <NotificationStack items={notifications} />
    </div>
  );
}

export default NotificationStackPreview;