sonner

Opinionated, beautiful toast notifications for React — stacked toasts with automatic dismissal and a dead-simple API.

sonner

React

Opinionated, beautiful toast notifications for React — stacked toasts with automatic dismissal and a dead-simple API.

npmGitHubDocs

Fit

Bundle (gzip)

9.4 kB

34.2 kB raw

Install size includes transitive dependencies. Bundle size is gzipped browser payload.

Freshness

The Problem

Most toast libraries require wrapping your app in a context provider, importing a component, and managing toast state yourself. Styling them to match your design is often an exercise in fighting specificity wars.

What It Does

Sonner renders a <Toaster /> component once at your app root, then exposes a simple toast() function callable anywhere. Toasts stack neatly, auto-dismiss, support promise-based loading/success/error states, and use CSS variables for easy theming.

Installation

bash
npm install sonner

Usage Example

tsx
import { Toaster, toast } from 'sonner';

// In your layout/root:
export function Layout({ children }) {
  return (
    <>
      {children}
      <Toaster richColors />
    </>
  );
}

// Anywhere in your app:
toast.success('Profile saved!');
toast.error('Something went wrong.');
toast.promise(saveData(), {
  loading: 'Saving...',
  success: 'Saved!',
  error: 'Failed to save.',
});

Related packages

cmdkReact

Fast, composable command palette for React — keyboard-driven search UI with fuzzy filtering and accessible markup out of the box.

@dnd-kit/coreReact

Modern, accessible drag-and-drop toolkit for React — fully customizable with keyboard support, collision detection, and zero dependencies.

embla-carousel-reactReact

Lightweight, extensible carousel library for React — smooth scrolling, touch/mouse drag, and full CSS control without prescribing markup.

flagsReact

Provider-agnostic feature flags SDK for Next.js and React — toggle features without redeploying.

framer-motionReact

Production-ready declarative animation library for React — gestures, layout animations, and scroll-driven effects with a clean API.