Sonner

An opinionated toast notifier built on Sonner. Mount the Toaster once near your app root, then call toast() from anywhere.

Install

npx shadcn@latest add https://atomx.acau.net/r/sonner.json

Usage

Mount the <Toaster /> once near the root of your app (e.g. in app/layout.tsx), then call toast(...) from anywhere in your component tree. The toast queue is managed by Sonner.

// app/layout.tsx
import { Toaster } from '@/components/ui/sonner'

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

// any component
import { toast } from 'sonner'

<Button onClick={() => toast('Saved')}>Save</Button>

Preview

Trigger a toast

Props

Toaster extends ToasterProps from sonner.

Prop	Type	Notes
`position`	`"top-left" \| "top-center" \| "top-right" \| "bottom-left" \| "bottom-center" \| "bottom-right"`	Where toasts appear. Defaults to `"bottom-right"`.
`expand`	`boolean`	Expand toasts on hover. Defaults to `false`.
`richColors`	`boolean`	Use richer success/error colors.
`closeButton`	`boolean`	Show a close button on each toast.
`theme`	`"light" \| "dark" \| "system"`	Color theme. Reads from `next-themes` by default.

The toast() function (imported from sonner) accepts a message string and an optional options object with description, action, duration, id, and more. See the Sonner docs for the full API.