Sonner

Brief toast notifications for success, errors, and background work. After add sonner, mount Toaster once in the root layout — without it, toast() shows nothing. Writing direction is passed through so layout flips in RTL.

Basic

Call toast() from sonner after mounting Toaster. Optional description and action.

Installation

CLI

npx @sonojs/ui@latest add sonner

Also needsnpm i lucide-react next-themes sonner

Setup

Required. Mount Toaster once in your root layout (inside ThemeProvider if you use one). Until you do, toast() will not appear.

Then mount<Toaster /> in app/layout.tsx

layout.tsx

import { Toaster } from "@/components/ui/sonner"

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        {/* Required — without this, toast() shows nothing */}
        <Toaster />
      </body>
    </html>
  )
}

Composition

structure

Toaster  // mount once in the root layout
toast()  // call from event handlers

Usage

sonner.tsx

"use client"

import { toast } from "sonner"

import { Button } from "@/components/ui/button"

export function Example() {
  return (
    <Button
      variant="outline"
      onClick={() => toast("Event has been created.")}
    >
      Show Toast
    </Button>
  )
}

Direction

Toaster reads useDirection and sets dir so toast text and actions follow LTR/RTL.

direction.tsx

import { Toaster } from "@/components/ui/sonner"

// Toaster inherits dir from useDirection / <html dir>.
<Toaster />

// Optional override:
<Toaster dir="rtl" position="top-center" />

Props

Prop	Type	Default	Description
theme	"light" · "dark" · "system"	from next-themes	On `Toaster` — color scheme for toast chrome.
dir	"ltr" · "rtl"	inherited	On `Toaster` — writing direction. Defaults from `useDirection`.
position	string	"bottom-right"	On `Toaster` or toast options — e.g. `"top-center"`, `"bottom-left"`.
toast()	(message, options?) => string · number	—	Imperative API from `sonner` — also `toast.success`, `.error`, `.promise`, etc.