Toast

Stacked notifications. Hover to expand, swipe to dismiss, timers pause on hover.

npx @kznlabs/labsui add toast

Hover the stack to expand · swipe sideways to dismiss

import { toast } from "@/components/ui/toast";export function notifySaved() {  toast.success("Changes saved", {    description: "All changes synced",    action: { label: "Undo", onClick: undo },  });}

<Toaster>

Mount once (root layout). Stacked toasts: hover, focus or a tap expands, swipe dismisses.

toast()

toast("Saved"), toast.success(title, { description, action, duration }), toast.loading(title), toast.promise(p, { loading, success, error }), toast.dismiss(id?).

toast(title: ReactNode, opts?: Partial<Omit<ToastData, "id" | "title">>) => number

type ToastData: { id: number; title: ReactNode; description?: ReactNode; variant: Variant; duration: number; action?: { label: string; onClick: () => void }; }

* required. Every component also takes className.