Sonner

"use client"

import { toast } from "sonner"

Installation


pnpmnpmyarnbun
pnpm dlx shadcn@latest add https://nessra-ui.vercel.app/r/sonner.json

Setup

Add the Toaster component to your root layout:

app/layout.tsx

import { Toaster } from "@/components/ui/sonner"
 
export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Toaster />
      </body>
    </html>
  )
}

Usage

import { toast } from "sonner"

toast("Event has been created.")

Examples

Types

"use client"

import { toast } from "sonner"

API Reference

Toaster

The Toaster component accepts all props from Sonner.

Prop	Type	Default	Description
`position`	`"top-left" \| "top-right" \| "bottom-left" \| "bottom-right" \| "top-center" \| "bottom-center"`	`"bottom-right"`	Toast position
`richColors`	`boolean`	`false`	Use rich colors for toast types
`expand`	`boolean`	`false`	Expand toasts by default

toast()

Method	Description
`toast()`	Default toast
`toast.success()`	Success toast
`toast.error()`	Error toast
`toast.warning()`	Warning toast
`toast.info()`	Info toast
`toast.loading()`	Loading toast
`toast.promise()`	Promise-based toast
`toast.dismiss()`	Dismiss a toast

Installation

Setup

Usage

Examples

Types

API Reference

Toaster

toast()

On this page