Sonner
An opinionated toast component for showing timely feedback, status updates, and inline actions.
Examples
Toast variants
Installation
npx shadcn@latest add "https://components.dylanwlim.com/c/sonner.json"
Component API
Toaster
| Prop | Type | Default | Description |
|---|---|---|---|
| ...props | React.ComponentProps<typeof Sonner> | All props are forwarded to Sonner's Toaster component. | |
| theme | ToasterProps['theme'] | system | Resolved from next-themes and passed through to Sonner. |
| className | string | toaster group | CSS class applied to the Sonner root for scoped toast styling. |