git404hub

what is sonner fr?

emilkowalski/sonner — explained in plain English

Analysis updated 2026-06-24

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

tl;dr

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.

vibe map

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

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 make with this?

VIBE 1

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

VIBE 2

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

what's the stack?

TypeScriptReact

how it stacks up fr

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 i run it?

Difficulty · easy time til it works · 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.

prompts (copy fr)

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 fr?

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.

peek the repo → explain another one

This repo across BitVibe Labs

double-check against the repo, no cap.

similar repos, if this ain't it