Toast

Component

About

A temporary notification popup (toast) that appears at the edge of the screen to announce actions, errors, or other brief events, with a global queue to trigger it from anywhere.

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

Code

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

Usage.tsx

import { MyToastRegion, queue } from "@/components/ui/css-toast";

export default function Example() {
  return (
    <div>
      <MyToastRegion />
      <button
        className="rounded-md bg-neutral-900 px-4 py-2 text-sm font-medium text-white dark:bg-white dark:text-neutral-900"
        onClick={() =>
          queue.add({
            title: "Files uploaded",
            description: "3 files uploaded successfully.",
          })
        }
      >
        Show Toast
      </button>
    </div>
  );
}