Toast notifications

Adapted

One line, said clearly. Default, success, error, warning and info toasts, an action toast with Undo, a promise toast that resolves or rejects, and a custom progress-bar toast.

SonnerRich colorsProgress

React · CSS

Origin & adaptation notes

Adapts the shadcn/ReUI Sonner block on the real sonner library: a trigger panel fires every toast type through the actual toast()/toast.success()/toast.promise() API, plus a toast.custom() progress-bar toast that owns its full card styling (sonner renders jsx toasts unstyled) and ticks via requestAnimationFrame before dismissing itself. Stacked bottom-right with rich colors and a close button, retheming Sonner’s own CSS variables against the gallery’s semantic tokens instead of custom markup. Nothing leaves this preview.

Curated adaptation. Synthetic data only. No production APIs.