Toast

Ready

Transient notification.

Requires sonner

Installation

$ npx @oratiq-js/ui add toast

Copies the component and everything it depends on into your project, then lists the npm packages to install. The code is yours after this.

import

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

Position follows the direction

Toasts default to the trailing edge — bottom-right in LTR, bottom-left in RTL. Flip the toggle above and fire one to see it move.

Toasts are announced politely and don't steal focus.
Anything with an action needs enough dwell time to reach it — never auto-dismiss an undo in under five seconds.
Never put information that exists nowhere else in a toast. It disappears, and screen-reader users may miss it entirely.