whatisgithub

What is sonner?

emilkowalski/sonner — explained in plain English

Analysis updated 2026-06-24

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

In one sentence

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

What do people build with it?

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.

What is it built with?

TypeScriptReact

How does it compare?

emilkowalski/sonnersnabbdom/snabbdomboardgameio/boardgame.io
Stars12,37012,37512,329
LanguageTypeScriptTypeScriptTypeScript
Setup difficultyeasyeasymoderate
Complexity1/53/53/5
Audiencedeveloperdeveloperdeveloper

Figures from each repo's GitHub metadata at analysis time.

How do you get it running?

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

So what is it?

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?

Frequently asked questions

What is sonner?

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.

What language is sonner written in?

Mainly TypeScript. The stack also includes TypeScript, React.

What license does sonner use?

License not specified in the explanation, check the repository directly before using in a project.

How hard is sonner to set up?

Setup difficulty is rated easy, with roughly 5min to a first successful run.

Who is sonner for?

Mainly developer.

Open on GitHub → Ask about another repo

This repo across BitVibe Labs

Verify against the repo before relying on details.

What are similar repos?