Command Menu

Search documentation, components, and switch theme.

Atoms

Sonner

Toast notification component.

shadcn/ui
Docs

Installation#

npx shadcn@latest add @formance/sonner

Install the following dependencies:

npm install sonner next-themes

Copy and paste the following code into your project.

Add the SonnerToaster component to your root layout.

import { SonnerToaster } from '@/components/ui/sonner'

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <SonnerToaster />
      </body>
    </html>
  )
}

Usage#

import { toast } from 'sonner'
toast('Transaction recorded')
toast.success('Payment processed')
toast.error('Transfer failed')
toast.warning('Low balance')
toast.info('Connector syncing')

Examples#

Types#