Sonner

A themed toast notification provider that wraps the Sonner Toaster with next-themes integration and custom Lucide icons for success, info, warning, error, and loading states.

Default
Custom
Dismissible
Positions

Selected position: bottom-right

Promise
Rich Colors

Rich colors — each variant gets a distinct background.

Variants
With Action
With Description

Installation

npx shadcn@latest add @byronwade/sonner

Props

PropTypeDefaultDescription
...propsToasterPropsAll props from Sonner's ToasterProps are forwarded directly to the underlying Toaster (e.g. position, richColors, expand, duration, closeButton, offset).