Data and utilities · stable · MIT

Sonner

Polite or urgent toast workflows with actions, promises, and swipe dismissal.

Install editable source

Add Sonner

Base UI / canonicalnpx shadcn@latest add https://gummyui.dev/r/gummy-sonner.json

Radix UI counterpartnpx shadcn@latest add https://gummyui.dev/r/gummy-radix-sonner.json

Canonical dependency: @base-ui/react. Radix counterpart: @radix-ui/react-toast. Registry dependencies are resolved automatically.

Behavior contract

Base UI notification region and non-modal toast dialogs.

Focus interaction pauses timeout; action and close remain native buttons.

Light and dark themes, logical RTL layout, reduced motion, responsive content, and forwarded public refs.

Source-derived reference

These public React parts are read directly from the canonical source during the documentation build.

Composes Toast.Provider.Props

Composes Omit<Toast.Viewport.Props, "children"> & { position?: "top-left" | "top-right" | "bottom-left" | "bottom-right"; closeLabel?: string; }

Troubleshooting

If the material is missing, confirm the registry-installed shared and component CSS files are imported once.
If interaction differs, preserve this contract: Focus interaction pauses timeout; action and close remain native buttons.
If assistive output differs, preserve this semantic foundation: Base UI notification region and non-modal toast dialogs.
If dark, RTL, or reduced-motion behavior is missing, verify the nearest theme, direction, and media-query boundaries rather than adding page-local overrides.

Live product source

The Component Lab exercises real source across default, focus, disabled, responsive, dark, reduced-motion, and RTL contexts.

Interactive inspection

Load the real component preview when you are ready to interact with its responsive, theme, and direction controls.

Radix UI counterpart

Load the separately installable Radix counterpart when you are ready to interact with its real behavior.

Editable source

The registry payload stays off the initial page request.

The registry payload stays off the initial page request.