<!-- Place once in your layout -->
<ui-sonner rich-colors json-toasts='[
{
"kind": "success",
"message": "Profile saved",
"description": "Your changes have been saved successfully."
},
{
"kind": "info",
"message": "Welcome back!"
}
]'></ui-sonner><ui-sonner>
<ui-sonner>| Prop | Type | Default | Description |
|---|---|---|---|
position | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "top-center" | "bottom-center" | "bottom-right" | Toast position. |
richColors | boolean | false | Use rich colors. |
json-toasts | InitialToast[] | [] | Initial toasts to show on mount. Each toast: { id?, kind?: "message" | "success" | "error" | "warning" | "info", message, description? }. Toasts are deduplicated by id. |
All components also accept standard HTML attributes (class, id, style, data-*, aria-*, etc.) which are passed through to the underlying element.