Toaster

A toaster component for displaying notifications, built on top of Sonner.

SourceDependency API

Installation

npx @rahimstack@latest add toaster

Usage

import { Toaster } from "@/components/ui/toaster"
 
export default function RootLayout({ children }) {
  return (
    <html lang="en" suppressHydrationWarning>
      <head />
      <body>
        <main>{children}</main>
        <Toaster />
      </body>
    </html>
  )
}

API Reference

const ToasterAnatomy = defineStyleAnatomy({
    toaster: cva(["group toaster"]),
    toast: cva([
        "group/toast",
        "group-[.toaster]:py-3 group-[.toaster]:gap-3",
        "group-[.toaster]:text-base group-[.toaster]:bg-[--paper] group-[.toaster]:text-[--foreground] group-[.toaster]:border-[--border] group-[.toaster]:shadow-lg",
        // Success
        "group-[.toaster]:data-[type=success]:bg-green-500 group-[.toaster]:data-[type=success]:text-white group-[.toaster]:data-[type=success]:border-[--green]",
        // Warning
        "group-[.toaster]:data-[type=warning]:bg-yellow-600 dark:group-[.toaster]:data-[type=warning]:bg-yellow-700 group-[.toaster]:data-[type=warning]:text-white group-[.toaster]:data-[type=warning]:border-[--yellow] dark:group-[.toaster]:data-[type=warning]:border-yellow-600",
        // Error
        "group-[.toaster]:data-[type=error]:bg-red-500 group-[.toaster]:data-[type=error]:text-white group-[.toaster]:data-[type=error]:border-[--red]",
        // Info
        "group-[.toaster]:data-[type=info]:bg-blue-500 group-[.toaster]:data-[type=info]:text-white group-[.toaster]:data-[type=info]:border-[--blue]",
    ]),
    description: cva([
        "group/toast:text-sm group/toast:text-[--muted]",
        "group-data-[type=success]/toast:text-green-100",
        "group-data-[type=warning]/toast:text-yellow-100",
        "group-data-[type=error]/toast:text-red-100",
        "group-data-[type=info]/toast:text-blue-100",
    ]),
    actionButton: cva(["group/toast:bg-[--subtle] group/toast:text-[--foreground]"]),
    cancelButton: cva(["group/toast:bg-[--subtle] group/toast:text-[--muted]"]),
})