https://github.com/emilkowalski/sonner

An opinionated toast component for React.
https://github.com/emilkowalski/sonner

notifications react toast

Last synced: 1 day ago
JSON representation

An opinionated toast component for React.

• Host: GitHub
• URL: https://github.com/emilkowalski/sonner
• Owner: emilkowalski
• License: mit
• Created: 2023-02-23T11:01:18.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2024-12-08T01:51:25.000Z (4 days ago)
• Last Synced: 2024-12-09T13:04:31.949Z (3 days ago)
• Topics: notifications, react, toast
• Language: TypeScript
• Homepage: https://sonner.emilkowal.ski
• Size: 967 KB
• Stars: 8,931
• Watchers: 13
• Forks: 289
• Open Issues: 72
• Metadata Files:
  • Readme: README.md
  • Funding: FUNDING.yml
  • License: LICENSE.md

Awesome Lists containing this project

• my-awesome-list - sonner
• awesome-leptos - Sonner

README

        
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

```

Add `` 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 (

    


      

       toast('My first toast')}>Give me a toast

    

  );

}

```


## Documentation

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