Toast

A brief, non-intrusive notification that appears temporarily to provide feedback.

Storybook

Sonner Docs

Source

Automatic Installation

This method is still working on progress, please use manual installation for now.

Manual Installation

Install dependencies

npm install radix-ui

Copy the code

components/toast/toast.tsx

import * as Lucide from 'lucide-react'
import { useTheme } from 'next-themes'
import { Toaster as Sonner, toast } from 'sonner'
import { toastStyles } from './toast.css'
 
type ToasterProps = React.ComponentProps<typeof Sonner>
 
const Toaster = ({ className, ...props }: ToasterProps) => {
  const { theme = 'system' } = useTheme()
  const styles = toastStyles()
  return (
    <Sonner
      theme={theme as ToasterProps['theme']}
      className={styles.root({ className })}
      toastOptions={{
        classNames: {
          toast: styles.toast(),
          title: styles.title(),
          description: styles.description(),
          loader: styles.loader(),
          closeButton: styles.closeButton(),
          cancelButton: styles.cancelButton(),
          actionButton: styles.actionButton(),
          success: styles.success(),
          error: styles.error(),
          info: styles.info(),
          warning: styles.warning(),
          loading: styles.loading(),
          default: styles.default(),
          content: styles.content(),
          icon: styles.icon(),
        },
      }}
      icons={{
        success: <Lucide.CircleCheckBig className={styles.icon()} strokeWidth={2} />,
        info: <Lucide.Info className={styles.icon()} strokeWidth={2} />,
        warning: <Lucide.OctagonAlert className={styles.icon()} strokeWidth={2} />,
        error: <Lucide.CircleOff className={styles.icon()} strokeWidth={2} />,
        loading: (
          <Lucide.Loader
            className={styles.icon({ className: 'shrink-0 animate-spin' })}
            strokeWidth={2}
          />
        ),
      }}
      {...props}
    />
  )
}
 
export { Toaster, toast, type ToasterProps }

Add the Toaster component

import { Toaster } from 'twistail-react/toast'
 
export default function RootLayout({ children }: Readonly<React.PropsWithChildren>) {
  return (
    <html lang="en">
      <body>
        <main>{children}</main>
        <Toaster position="bottom-right" />
      </body>
    </html>
  )
}

Usage

Imports

import { Toaster, toast, type ToasterProps } from '#/components/toast'

Example

Browse the Storybook for more examples.

On this page