Toast Gravity Stack

Component 46

About

A toast notification tray where alerts fall under simulated gravity and pile into a jostling heap, with heavier severities sinking and the pile resettling when a toast is dismissed or swiped away.

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

Code

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

Usage.tsx

"use client";

import ToastGravityStack from "@/components/ui/toast-gravity-stack";
import { useRef } from "react";

export default function ToastGravityStackDemo() {
  const stackRef = useRef<any>(null);

  return (
    <div className="flex h-screen w-full flex-col items-center justify-center gap-6 bg-background p-6">
      <div className="flex gap-2">
        <button
          type="button"
          onClick={() =>
            stackRef.current?.push({
              severity: "info",
              title: "Deployment complete",
              message: "build #482 shipped to production",
            })
          }
          className="rounded-sm border border-border bg-surface px-3 py-1.5 text-sm text-foreground hover:border-foreground/20"
        >
          Info
        </button>
        <button
          type="button"
          onClick={() =>
            stackRef.current?.push({
              severity: "warning",
              title: "High memory usage",
              message: "worker-3 at 92% RSS",
            })
          }
          className="rounded-sm border border-border bg-surface px-3 py-1.5 text-sm text-foreground hover:border-foreground/20"
        >
          Warning
        </button>
        <button
          type="button"
          onClick={() =>
            stackRef.current?.push({
              severity: "error",
              title: "Payment failed",
              message: "card declined by issuer",
            })
          }
          className="rounded-sm border border-border bg-surface px-3 py-1.5 text-sm text-foreground hover:border-foreground/20"
        >
          Error
        </button>
      </div>
      <ToastGravityStack ref={stackRef} className="h-96 w-full max-w-md" />
    </div>
  );
}