Toast

Component

About

An accessible toast notification system with a toast() call and a Toaster you mount once, supporting variants, an optional undo-style action, and swipe-to-dismiss.

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

"use client";

import { Toaster, toast } from "@/components/ui/toast";
import { Button } from "@/components/ui/button";

export default function ToastDemo() {
  return (
    <div className="flex min-h-[200px] w-full items-center justify-center">
      <Button
        onClick={() =>
          toast({
            title: "Changes saved",
            description: "Your profile has been updated.",
            variant: "success",
          })
        }
      >
        Show toast
      </Button>
      <Toaster position="bottom-right" />
    </div>
  );
}