Sonner
An opinionated toast component for React.
Made by emilkowalski_
Installation
Loading component...
When to use
Sonner provides toast notifications for user feedback. Use this decision tree:
Usage
import { toast } from "sonner"toast("Event has been created.")toast.success("Success", {
description: "Profile updated successfully",
})toast.error("Terrible, terrible damage", {
description: "Failed to update profile",
}) Promise Toast
Loading component...
toast.promise(saveSettings(), {
loading: 'Saving settings...',
success: (data) => `${data.name} saved`,
error: (error) => `Failed to save: ${error.message}`,
});Severity Variants
Loading component...
Toast with Action
Loading component...
Custom Data Payload
Loading component...
Deduplicated by ID
Loading component...
Credits
- We use Sonner for the sonner (toast) component.
- We take our inspiration from Shadcn UI for the sonner (toast) style.
Recent changes
- patchv1.2.0Pin shipped dependency floors to the version we develop against. Registry items now declare ranges like `^5.1.9` (the actual installed version) instead of collapsing to `^5.0.0`, so consumers start on the known-tested b…#133
- minorv1.1.0Theme docs refresh, readability pass on semantic foregrounds, and consumer-facing Base UI regression fixes.#121
- minorv1.0.0Post-Base-UI polish. Public API unchanged.#116
- majorv1.0.0Migrate every Radix-based primitive to `@base-ui/react@^1.4.0` (Base UI).#114
- minorv0.3.0Add theme-provider component to the registry with documentation and tests. Includes playground type improvements (export RegistryItem, remove as-const boilerplate) and docs site dark mode border color fix.#109
Built by malinskibeniamin. The source code is available on GitHub.