https://github.com/emilkowalski/sonner

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

notifications react toast

Last synced: 6 days 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 (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-10-13T16:39:25.000Z (21 days ago)
• Last Synced: 2024-10-14T16:24:17.046Z (20 days ago)
• Topics: notifications, react, toast
• Language: TypeScript
• Homepage: https://sonner.emilkowal.ski
• Size: 989 KB
• Stars: 8,449
• Watchers: 13
• Forks: 265
• Open Issues: 81
• 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).