Sonner Component

An opinionated toast component for React with beautiful animations and a clean design. Sonner is built and maintained by emilkowalski.

Multiple toast types: success, error, warning, info
Custom toast content including actions
Smooth animations
Promise-based toasts
Accessible design

Installation

The Sonner component is part of our UI library. You can import it directly from the components directory.

Usage

Here is how to use Sonner in your project.

React TSX
1import { Toaster, toast } from "@/components/modern-ui/sonner"

First, add the <Toaster /> component to your app:

React TSX
1// In your layout or root component
2import { SonnerGlobal } from "@/components/modern-ui/sonner"
3
4export default function RootLayout({ children }) {
5  return (
6    <html lang="en">
7      <body>
8        {children}
9        <SonnerGlobal />
10      </body>
11    </html>
12  )
13}

Then, use the toast() function anywhere in your components:

React TSX
1import { toast } from "@/components/modern-ui/sonner"
2
3function MyComponent() {
4  return (
5    <button onClick={() => toast("My first toast")}>
6      Show Toast
7    </button>
8  )
9}

Examples

Basic Toast

Toast Types

Custom Toast

Toast with Actions

Promise Toast

API Reference

Toaster

Prop	Type	Default	Description
`position`	`"top-left" \| "top-right" \| "bottom-left" \| "bottom-right" \| "top-center" \| "bottom-center"`	`"bottom-right"`	Position of the toasts
`expand`	`boolean`	`false`	Whether to expand toasts on hover
`duration`	`number`	`4000`	Default duration for toasts in milliseconds
`visibleToasts`	`number`	`3`	Maximum number of visible toasts
`closeButton`	`boolean`	`false`	Whether to show close buttons on toasts
`offset`	`string \| number`	-	Offset from the edges of the screen
`theme`	`"light" \| "dark" \| "system"`	`"system"`	Color theme
`richColors`	`boolean`	`false`	Whether to use rich colors for different toast types
`className`	`string`	-	Additional CSS classes for the toast container
`toastOptions`	`ToastOptions`	-	Default options for all toasts

toast() Function

The toast() function accepts the following parameters:

React TSX
1toast(message, options?)

Parameter	Type	Description
`message`	`string \| React.ReactNode`	Content of the toast
`options`	`ToastOptions`	Configuration options for the toast

ToastOptions

Option	Type	Description
`id`	`string \| number`	Custom ID for the toast
`duration`	`number`	Duration in milliseconds
`icon`	`React.ReactNode`	Custom icon to display
`description`	`string \| React.ReactNode`	Additional description text
`action`	`{ label: string, onClick: () => void }`	Action button configuration
`cancel`	`{ label: string, onClick: () => void }`	Cancel button configuration
`onDismiss`	`() => void`	Function called when toast is dismissed
`onAutoClose`	`(toast: ToastT) => void`	Function called when toast automatically closes
`position`	Same as Toaster position	Position override for individual toasts
`className`	`string`	Additional CSS classes for this toast
`dismissible`	`boolean`	Whether the toast can be dismissed by clicking
`important`	`boolean`	Prevents toast from being automatically removed