Toast

Toast notifications leverage the Sonner package with the Omni glass styling preset. Instead of a dedicated toast component, install@omni/sonnerand follow the Sonner usage patterns.

Sonner quick demo

Use the Sonner toaster
Trigger toasts with the toast helper—no extra wrapper component required.

Looking for the full API and variant examples? Visit the Sonner page for an in-depth breakdown.

Installation

pnpm dlx shadcn@latest add @omni/sonner

Usage

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

export function Demo() {
  return (
    <>
      <Toaster position="top-right" richColors />
      <button onClick={() => toast("Maintenance window", {
        description: "Deployments pause at 02:00 JST.",
      })}>
        Trigger toast
      </button>
    </>
  )
}