Notification stack

Block

Stacked notifications that fan out on hover or focus.

Installs components/ui/notification-stack.tsxDepends on @radix-ui/react-slot, lucide-reactMotion none in component source

pnpm dlx shadcn@latest add https://caliperui.site/r/notification-stack.json

Export ready

report-q3.csv is ready to download.

Draft saved

Pricing page · 2 minutes ago

Invite accepted

Sam joined Atlas platform.

When to use #

Use it for

Showing several recent updates compactly.

Skip it when

One message at a time is enough.

Installation #

terminal

pnpm dlx shadcn@latest add https://caliperui.site/r/notification-stack.json

Adds its 3 files to components/ui/, each with its own stylesheet, and installs their packages. No account needed. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

This is the code behind the preview above.

example.tsx

import { useState } from "react"
import { NotificationStack, type StackNotification } from "@/components/ui/notification-stack"

export function NotificationStackDemo() {
  const [, setLog] = useState("");
  const [stack, setStack] = useState<StackNotification[]>([
      { id: "s1", title: "Export ready", body: "report-q3.csv is ready to download.", action: { label: "Download", onClick: () => setLog("Downloading report-q3.csv") } },
      { id: "s2", title: "Draft saved", body: "Pricing page · 2 minutes ago" },
      { id: "s3", title: "Invite accepted", body: "Sam joined Atlas platform." },
    ]);
  return (
    <NotificationStack className="max-w-sm" notifications={stack} onDismiss={(id) => setStack((l) => l.filter((n) => n.id !== id))} onClear={() => setStack([])} />
  );
}

API reference #