Sonner for React: Tutorial, Installation & Toast Examples

A compact, practical guide to the sonner React notification library — installation, hooks, toast.promise, customization and accessibility. No fluff, just the bits you’ll copy-paste.

Quick analysis of top search results & user intent

Looking at the typical English-language top-10 results for queries like “sonner”, “React toast notifications” and “sonner tutorial”, you usually find a consistent mix: the official sonner docs, the GitHub repo, the NPM package page, and several community tutorials (Dev.to, personal blogs, YouTube). Results often include comparisons with other libraries (react-toastify, react-hot-toast), examples that show installation and basic usage, and sample customization guides.

User intent across these queries breaks down roughly like this: informational (how to use sonner, API, examples), navigational (official docs, GitHub, NPM), and transactional/comparative (is sonner better than react-toastify?). Many queries are mixed intent: users want both a quick install and a working example they can adapt.

Competitors typically structure their content with: quick install, minimal example, API reference for hooks/components (Toaster, toast), customization/CSS, and an advanced section demonstrating toast.promise or custom renderers. Depth varies: official docs are concise but authoritative; community posts add real-world examples and gotchas.

How Sonner fits into the React notification landscape

Sonner is a lightweight React notification (toast) library aiming to be ergonomic and hook-friendly. It focuses on a minimal API (Toaster container + toast helpers) and supports promise-aware notifications, theming, and accessible markup — in short, everything you need to replace verbose ad-hoc solutions or heavier libraries.

Where it shines: small bundle size, clear hooks (e.g., useToast / toast helpers), and pragmatic defaults. Where it can need work: advanced layouts or extremely bespoke animations might require extra CSS or wrapping components.

If you’re comparing it to alternatives, search results often show side-by-side code examples, and community posts highlight migration tips from react-toastify or react-hot-toast. For a snapshot comparison and install links, check the official GitHub and npm.

Installation & setup (copy-paste ready)

Installing Sonner is trivial. From your project root run either of the common package manager commands. This is the step most tutorials start with for a reason — without it you get only compile-time sadness.

// npm
npm install sonner

// yarn
yarn add sonner

Then add the Toaster provider once in your app, typically in App.jsx or at the root of your route tree. The Toaster component mounts the toast container and provides keyboard/ARIA behavior by default.

import { Toaster } from 'sonner'

function App(){
  return (
    <>
      
      
    
  )
}

This basic setup is the same across most examples you’ll see in the top search results: install, mount , import and call toast helpers from event handlers or effects.

Core concepts and APIs (hooks, toast, toast.promise)

Sonner provides a compact API surface: the Toaster container and the toast helpers (or a hook). Typical usage patterns are synchronous notifications, controlled toasts, and promise-based lifecycle notifications via toast.promise.

Example: using the toast helper for success/error messages is delightfully short. The library also exposes imperative controls for programmatic dismissal when you need to cancel a toast from code (for example, when a component unmounts).

import { toast } from 'sonner'

async function save() {
  const p = api.saveData()
  toast.promise(p, {
    loading: 'Saving…',
    success: 'Saved!',
    error: 'Save failed'
  })
  await p
}

That toast.promise pattern shows up in many top articles because it maps directly to the mental model of async UI states — loading, success, error — and reduces boilerplate in action handlers.

Customization, theming and accessibility

Sonner supports customization via props, CSS variables, and custom renderers. The docs and community examples usually show how to change positions, durations, and add icons or buttons to toasts. If you need advanced styling, define CSS for the toast classes or pass a custom component; the Toaster accepts configuration for positions like top-right, bottom-left, etc.

Accessibility is not optional: Sonner uses appropriate ARIA roles and live-region behavior by default, but you should verify in your app (screen-reader testing). For voice-assist and voice-search optimization, prefer short, descriptively phrased messages because voice snippets favor concise, semantic text.

Small but important tip: avoid excessively verbose toast messages or long HTML inside toasts — keep content consumable by assistive tech and concise for feature snippets.

Practical examples and patterns

Below are patterns you’ll find across the best community posts and official docs. They cover common production needs: batching toasts, deduplication, controlled durations, and manual dismissal.

1) Deduplicate similar toasts by keeping a short id map and check before creating a new toast. 2) For server responses, use toast.promise so the UI notifies each lifecycle phase. 3) Use programmatic controls to dismiss toasts when navigating away from a page to avoid stale notifications.

// simple dedupe pattern
const active = new Set()
function showUnique(key, message){
  if (active.has(key)) return
  active.add(key)
  const id = toast(message, { duration: 4000, onClose: ()=> active.delete(key) })
}

These kinds of pragmatic snippets are common in high-ranking guides; they turn the theoretical API into robust UX patterns you can reuse across apps.

Troubleshooting and gotchas

If a toast doesn’t appear, first check that is mounted within React tree (providers and strict mode may affect render order). Next, ensure your bundler transpiles the node_modules entry point if using older toolchains.

Another frequent hiccup: styling conflicts. Sonner ships with baseline styles; a global CSS reset or component library may override them. The fix is to namespace your overrides or provide a minimal theme override to restore expected visuals.

Finally, if promises behave oddly with toast.promise, ensure the promise you pass is the original promise (not one already awaited or transformed), otherwise the lifecycle mapping won’t match the UI updates in many examples you see online.

Best practices and SEO considerations for toasts

From a UX and SEO perspective: toasts are ephemeral UI elements and should not contain critical navigational links or content that must be indexed. Search engines won’t index in-app transient UI, so reserve toasts for micro-feedback and use persistent banners or pages for indexable content.

For voice search and snippets, ensure that toast messages are short and semantically clear. If you want key messages to be discoverable or read by screen readers, provide alternate persistent content (e.g., an in-page status area) that can be indexed or accessed directly.

Finally, when documenting Sonner usage on a public site (hello, SEO folks), include code examples, expected outputs, and small accessibility notes — these are precisely the elements search engines reward in featured snippets and PAA boxes.

Selected common user questions (People Also Ask & forum signals)

• What is Sonner and how is it different from react-toastify?
• How do I install Sonner in a React project?
• How to use toast.promise with Sonner?
• How to customize the position and style of Sonner toasts?
• Does Sonner support TypeScript?
• How to dismiss toasts programmatically?
• Is Sonner accessible for screen readers?

FAQ — top 3 user questions (short, precise answers)