Sonner

Show temporary notifications through the Sonner toast system.

View component source ↗

Preview

Example

A minimal example to get started.

Installation

Install this component and its dependencies in a project initialized with shadcn.

pnpm dlx shadcn@latest add https://ui.hyunjoon.net/r/sonner.json

Usage

This is the basic example. Use the Code tab above for the selected example. Adjust import aliases to match your project.

import { toast } from "sonner";

import { Button } from "@/components/ui/button";
import { Toaster } from "@/components/ui/sonner";

export default function Example() {
  return (
    <>
      <Toaster />
      <Button onClick={() => toast.success("Your changes have been saved.")}>
        Show notification
      </Button>
    </>
  );
}

API reference

Derived from the installed component types. Native DOM props are also supported where applicable. A dash means no explicit default is documented. Some props depend on the selected mode.

Toaster

Toaster properties
Prop	Type	Default	Description
`id`	string \| undefined string \| undefined	`—`	Unique identifier used to associate labels and descriptions.
`invert`	boolean \| undefined boolean \| undefined	`—`	Configures invert; see the accepted type.
`theme`	"light" \| "dark" \| "system" \| undefined "light" \| "dark" \| "system" \| undefined	`—`	Configures theme; see the accepted type.
`position`	Position \| undefined Position \| undefined	`—`	Preferred placement of the notification region.
`hotkey`	string[] \| undefined string[] \| undefined	`—`	Configures hotkey; see the accepted type.
`richColors`	boolean \| undefined boolean \| undefined	`—`	Configures rich colors; see the accepted type.
`expand`	boolean \| undefined boolean \| undefined	`—`	Configures expand; see the accepted type.
`duration`	number \| undefined number \| undefined	`—`	Duration in milliseconds.
`gap`	number \| undefined number \| undefined	`—`	Configures gap; see the accepted type.
`visibleToasts`	number \| undefined number \| undefined	`—`	Configures visible toasts; see the accepted type.
`closeButton`	boolean \| undefined boolean \| undefined	`—`	Configures close button; see the accepted type.
`toastOptions`	ToastOptions \| undefined ToastOptions \| undefined	`—`	Configures toast options; see the accepted type.
`className`	string \| undefined string \| undefined	`—`	Additional CSS classes merged with the component styles.
`style`	React.CSSProperties \| undefined React.CSSProperties \| undefined	`—`	Inline CSS properties applied to the element.
`offset`	Offset \| undefined Offset \| undefined	`—`	Configures offset; see the accepted type.
`mobileOffset`	Offset \| undefined Offset \| undefined	`—`	Configures mobile offset; see the accepted type.
`dir`	"auto" \| "ltr" \| "rtl" \| undefined "auto" \| "ltr" \| "rtl" \| undefined	`—`	Configures dir; see the accepted type.
`swipeDirections`	SwipeDirection[] \| undefined SwipeDirection[] \| undefined	`—`	Configures swipe directions; see the accepted type.
`icons`	ToastIcons \| undefined ToastIcons \| undefined	`—`	Configures icons; see the accepted type.
`customAriaLabel`	string \| undefined string \| undefined	`—`	Configures custom aria label; see the accepted type.
`containerAriaLabel`	string \| undefined string \| undefined	`—`	Configures container aria label; see the accepted type.

Usage notes

Mount one Toaster for the relevant application area. Trigger messages through the sonner toast API and use next-themes for theme synchronization.