explaingit

emilkowalski/sonner

★ 12,370TypeScriptAudience · developerComplexity · 1/5Setup · easy

TLDR

A simple React component for showing brief pop-up notification messages, like 'File saved' or 'Something went wrong', that appear at the edge of the screen and disappear on their own.

Mindmap

mindmap
  root((sonner))
    What it does
      Show toast notifications
      Auto-dismiss messages
    Setup
      Install package
      Add Toaster component
      Call toast function
    Use cases
      Success confirmations
      Error messages
      Status updates
    Tech
      React
      TypeScript
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Add success, error, or info toast notifications to a React app with a single component and one function call.

USE CASE 2

Show a 'Link copied' or 'Changes saved' confirmation message anywhere in your app without managing position or timing yourself.

Tech stack

TypeScriptReact

Getting it running

Difficulty · easy Time to first run · 5min
License not specified in the explanation, check the repository directly before using in a project.

In plain English

Sonner is a small React component that displays toast notifications: the brief pop-up messages that appear at the edge of a screen to confirm an action or deliver a status update, then disappear on their own. Examples include "File saved", "Link copied", or "Something went wrong". To use it, you install the package, place a single <Toaster /> component somewhere near the top of your app, and then call toast('Your message here') from anywhere else in your code when you want a notification to appear. There is no need to manage the positioning or timing yourself. The README for this project is brief and points readers to an external documentation site for the full API. Based on what is provided here, the library focuses on simplicity: one component to set up, one function to trigger notifications.

Copy-paste prompts

Prompt 1
I want to add a toast notification to my React app using Sonner. Show me the exact install command, where to place the Toaster component, and how to call toast() after a form submission.
Prompt 2
How do I show a loading toast with Sonner that updates to a success message once my API call completes?
Prompt 3
I want to show an error toast in Sonner when a fetch request fails. Show me how to call toast.error() and pass the error message from the catch block.
Prompt 4
Where do I find Sonner's full API docs for customizing toast duration, position, and styling beyond what the README covers?
Open on GitHub → Explain another repo

← emilkowalski on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.