Docs
Sonner

Sonner

An opinionated toast component for React.

DocsSource

About

Sonner is built and maintained by emilkowalski_.

Installation

Install the following dependencies:

npm install sonner

Copy and paste the following code into your project.

'use client';
 
import { Toaster as Sonner } from 'sonner';
import styles from './styles.module.scss';
 
export type ToasterProps = React.ComponentProps<typeof Sonner>;
 
const Toaster = ({ ...props }: ToasterProps) => {
    return (
        <Sonner
            theme='system'
            className={styles.toaster}
            toastOptions={{
                classNames: {
                    toast: styles.toast,
                    description: styles.description,
                    actionButton: styles.actionButton,
                    cancelButton: styles.cancelButton,
                },
            }}
            {...props}
        />
    );
};
 
export { Toaster };

Add the Toaster component

app/layout.tsx
import { Toaster } from '@/components/ui/sonner';
 
export default function RootLayout({ children }) {
    return (
        <html lang='en'>
            <head />
            <body>
                <main>{children}</main>
                <Toaster />
            </body>
        </html>
    );
}

Update the import paths to match your project setup.

Usage

import { toast } from 'sonner';
toast('Event has been created.');