emilkowalski

emilkowalski/sonner

An opinionated toast component for React.

View on GitHub Website / Demo Back to listing

13.1kstars 469forks 88contributors TypeScript

README.md

https://github.com/vallezw/sonner/assets/50796600/59b95cb7-9068-4f3e-8469-0b35d9de5cf0

[Sonner](https://sonner.emilkowal.ski/) is an opinionated toast component for React. You can read more about why and how it was built [here](https://emilkowal.ski/ui/building-a-toast-component).

## Usage

To start using the library, install it in your project:

```bash
npm install sonner
```

Alternatively you can use the `/ask-sonner` skill to do it for you and help you with any other Sonner-related questions.

```bash
npx skills add https://github.com/emilkowalski/skills --skill ask-sonner
```

Add `<Toaster />` to your app, it will be the place where all your toasts will be rendered.
After that you can use `toast()` from anywhere in your app.

```jsx
import { Toaster, toast } from 'sonner';

// ...

function App() {
  return (
    <div>
      <Toaster />
      <button onClick={() => toast('My first toast')}>Give me a toast</button>
    </div>
  );
}
```

## Documentation

Find the full API reference in the [documentation](https://sonner.emilkowal.ski/getting-started).

Repository info

Default branch: main
Latest version: v2.0.8
Created: 23/02/2023
Last activity: 10/08/2026
License: MIT
Open issues: 84
Watchers: 16

Topics

notifications react toast

Contributors

emilkowalski

207 contributions

huozhi

6 contributions

ajmnz

4 contributions

danjohnson95

4 contributions

wobsoriano

4 contributions