ComponentClient component

Toast / Sonner

Polished toast notifications for transient feedback.

Installation

Preview

Usage

tsx

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

export function App() {
  return (
    <>
      <Toaster />
      <button onClick={() => toast.success("Published")}>Publish</button>
    </>
  )
}

API reference

Prop	Type	Default	Description
`position`	`ToasterProps['position']`	`"bottom-right"`	Viewport edge used for the toast stack.
`richColors`	`boolean`	`false`	Enables stronger semantic colors.
`className`	`string`	`—`	Overrides or extends the generated Tailwind classes.
`disabled`	`boolean`	`false`	Prevents user interaction when supported.