Sonner

Untitled UI-styled notification toasts via the Sonner library, plus a progress-toast helper.

$bunx shadcn@latest add @nx-ui/sonner

Installs withutils

A neutral toast for status updates, with or without supporting text. Every toast carries a close button.

Success, error, warning, info and loading states. Severity lives in the tinted leading icon — the card itself stays neutral, per Untitled UI.

Brand-coloured text action plus a gray cancel, for quick undoable responses.

Chain a toast to an async action so it moves through loading, then success or error.

toastWithProgress renders a slim brand-coloured bar that drains over the toast's duration and pauses while the stack is hovered.

duration: Infinity keeps a toast on screen until it is dismissed by hand — the always-on close button earns its keep.

toast.custom composes any card inside the toast shell — here a FeaturedIcon celebration.

One Toaster serves all six positions — switching re-homes the live stack, and each switch fires a toast to prove it.

Toasts stack behind the front card and fan out on hover. Expand keeps them fanned out; visibleToasts caps how many show at once.

Expand by default

Visible toasts

API reference

Exported parts and their props, extracted from the component source.

…extends ToasterProps