Notification

Component

About

A toast-style notification system that stacks dismissible info, warning, and error cards at the top of the page, fired imperatively via a hook.

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

Code

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

Usage.tsx

"use client";

import NotificationProvider, {
  useNotifications,
} from "@/components/ui/notification";

function NotificationTriggers() {
  const { notify } = useNotifications();
  return (
    <div className="flex flex-wrap items-center justify-center gap-3">
      <button
        type="button"
        className="border-2 border-black bg-white px-4 py-2 font-mono text-sm font-bold text-black"
        onClick={() => notify("Saved", "Your changes have been saved.")}
      >
        Info
      </button>
      <button
        type="button"
        className="border-2 border-black bg-white px-4 py-2 font-mono text-sm font-bold text-black"
        onClick={() =>
          notify("Check your input", "Some fields look unusual.", "warning")
        }
      >
        Warning
      </button>
      <button
        type="button"
        className="border-2 border-black bg-white px-4 py-2 font-mono text-sm font-bold text-black"
        onClick={() =>
          notify("Something went wrong", "Please try again.", "error")
        }
      >
        Error
      </button>
    </div>
  );
}

export default function NotificationDemo() {
  return (
    <NotificationProvider duration={4000}>
      <div className="flex min-h-screen w-full items-center justify-center bg-white p-10">
        <NotificationTriggers />
      </div>
    </NotificationProvider>
  );
}