Create Next App

Docs

sonner

An opinionated toast component for React.

About

Sonner is built and maintained by emilkowalski_.

Installation

Run the following command:

npx duck-ui@latest add sonner

npx duck-ui@latest add sonner

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>
  )
}

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>
  )
}

Usage

import { toast } from 'sonner'

import { toast } from 'sonner'

toast('Event has been created.')

toast('Event has been created.')

Examples

Default

API Reference

Props

The Toaster component accepts all the props supported by Sonner, with additional theme-aware styling.

| Prop | Type | Default | Description | | -------------- | -------- | --------- | ------------------------------------------------------------------ | -------- | -------------------------------------------------------------------------------------------- | | theme | 'light' | 'dark' | 'system' | system | Specifies the theme for the toaster. Uses the current theme from next-themes if available. | | className | string | toaster | Adds additional CSS classes to the main toaster wrapper. | | toastOptions | object | {} | Customizes individual toast components (see ToastOptions below). |

ToastOptions

The toastOptions object allows you to customize the appearance and behavior of the individual toasts.

Option	Type	Description
`classNames`	`object`	Custom CSS classes for different toast elements (see below).
`classNames.toast`	`string`	Styles applied to the toast container.
`classNames.description`	`string`	Styles applied to the toast description text.
`classNames.actionButton`	`string`	Styles applied to action buttons inside the toast.
`classNames.cancelButton`	`string`	Styles applied to cancel buttons inside the toast.

Default `classNames`

Element	Default Class Name
`toast`	`group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg`
`description`	`group-[.toast]:text-muted-foreground`
`actionButton`	`group-[.toast]:bg-primary group-[.toast]:text-primary-foreground`
`cancelButton`	`group-[.toast]:bg-muted group-[.toast]:text-muted-foreground`

Notes

Ensure you have sonner installed and configured in your project.
Place the Toaster component in your root layout or main app file to make it available globally.
Theme-awareness is achieved via the useTheme hook from next-themes, and the default theme is set to system if no specific theme is provided.

Slider Switch