Sonner

An opinionated toast component for React.

GitHub

Installation

npm install sonner

Usage

Render the toaster in the root of your app.

import { Toaster, toast } from 'sonner'


// ...


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

Types

You can add richColors prop to make error and success toasts more colorful

toast('Event has been created')

Position

Swipe direction changes depending on the position.

<Toaster position="bottom-right" />

Expand

You can change the amount of toasts visible through the visibleToasts prop.

<Toaster expand={false} />

Other

toast.success('Event has been created')


// ...


<Toaster richColors  />