Sonner

Composition preview

Try Sonner alongside its related feedback & loading components. These examples keep all actions local.

Usage

import { toast } from "@/features/ui/toast";

toast.success("Changes saved");
// Keep the shared renderer mounted once at the application root.

Composition recipe. Supply application state, handlers and persistence in the owning product component. Inspect the installed source before extending its API.

API & composition

toast.success/error/info/show/dismiss; title, description, duration, optional async action

Usage & accessibility

The shared toast store feeds Sonner while retaining action pending/retry, hover/focus pause, and native-modal placement.

Implementation contract

src/components/ui/sonner.tsx

Use named variants and semantic theme tokens. Preserve existing input values, refs, focus and cancellation behavior. Verify keyboard, narrow layouts and pending/error states when behavior changes.