Toast

hot

Sonner-style notifications: an imperative toast() API, promise toasts, actions, stacking that expands on hover, swipe to dismiss.

3 files · 289 locdeps: clsx, tailwind-merge

Installation

With the shadcn CLI, pointing at this platform’s registry:

npx shadcn@latest add https://opusui.131199999.xyz/r/toast.json

Or offline, straight from your opus55 checkout (copies every file it needs):

node ../tailwind_component/opus55/scripts/add.mjs toast

Usage

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

// once, in your root layout:
<Toaster position="bottom-right" />

// anywhere:
toast.success("Saved");
toast.promise(save(), { loading: "Saving…", success: "Saved", error: "Failed" });

API

Prop	Type	Default	Description
toast(title, options?)	{ description?, duration?, action?, icon?, id? }	—	Also .success .error .warning .info .loading .promise .dismiss.
Toaster.position	"top-left" \| "top-center" \| "top-right" \| "bottom-left" \| "bottom-center" \| "bottom-right"	"bottom-right"	Corner.
Toaster.visible / duration / expand	number / number / boolean	3 / 4000 / false	Stack depth, lifetime, always expanded.

Notes

Timers pause while the stack is hovered. Error toasts use role=alert, others role=status inside an aria-live region.

← PreviousAlert Next →Tabs