Sonner (Toast)

A toast notification component wrapping the sonner library. Each toast renders as a mini Y2K window — pastel title bar with window dots, thick navy border, flat white body, and an ✕ close control.

sonner-demo.app

Installation

terminal.sh

npx y2kui@latest add sonner

You'll also need the sonner package installed in your project:

terminal.sh

npm install sonner

Usage

Place <Toaster /> once at the root of your app, then import toast anywhere to trigger notifications.

// app/layout.tsx — add <Toaster /> inside <body>
import { Toaster } from "@/components/ui/sonner"

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

// Any client component
import { toast } from "sonner"

toast.success("Saved!")
toast.error("Something went wrong")
toast("Hello world")

Toast types

Method	Title bar
`toast(message)`	Plain white title bar
`toast.success(message)`	Lemon title bar (#ffe45e)
`toast.error(message)`	Pink title bar (#ff8fcf)
`toast.info(message)`	Blue title bar (#8ed1fc)
`toast.warning(message)`	Lilac title bar (#b69cff)

Each call accepts an options object as the second argument:

toast.success("Title", {
  description: "Additional detail shown below the body.",
  duration: 4000,
  action: {
    label: "Undo",
    onClick: () => console.log("Undo"),
  },
})

Props

The <Toaster /> component accepts all props supported by the underlying Sonner Toaster.

Prop	Type	Default	Description
`closeButton`	boolean	`true`	Show an ✕ close button in the title bar. Enabled by default in Y2K styling.
`position`	'top-left' \| 'top-right' \| 'bottom-left' \| 'bottom-right' \| 'top-center' \| 'bottom-center'	`'bottom-right'`	Where toasts appear on screen.
`duration`	number	`4000`	Time in ms before a toast auto-dismisses. Set to Infinity to disable.
`expand`	boolean	`false`	Show toasts in an expanded list.
`visibleToasts`	number	`3`	Maximum number of visible toasts.
`offset`	number \| string	`24px`	Offset from the edge of the screen.
`gap`	number	`12`	Gap between toasts in px.
`toastOptions`	ToastOptions	—	Override default styling or add per-toast className.
`richColors`	boolean	`false`	Use Sonner's built-in rich colors (overrides Y2K styling).

Sonner (Toast)

Installation

Usage

Toast types

Props

On this page