Sonner

Toast notifications powered by Sonner. Provides the Toaster component with shincn-themed icons and styling.

Installation

npx shadcn add sonner --registry https://ui.ch.sh/r

Usage

// Add <Toaster /> to your root layout
import { Toaster } from "@/components/ui/sonner"

export default function Layout({ children }) {
  return (
    <>
      {children}
      <Toaster />
    </>
  )
}

// Then use toast() anywhere
import { toast } from "sonner"

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

Examples

Variants