Sonner
An opinionated, beautiful toast notification library. Supports stacking, promises, and rich content. From Emil Kowalski.
$cookest-ui add sonner
Toast Types
Trigger different toast variants using the toast() function.
Promise Toast
Show loading → success/error states for async operations like saving a recipe.
Rich Content
Toasts can include custom JSX content for richer notifications.
| Prop | Type | Default | Description |
|---|---|---|---|
position | "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right" | "bottom-right" | Where toasts appear on screen. |
duration | number | 4000 | Auto-dismiss delay in milliseconds. |
richColors | boolean | false | Use colored backgrounds for success/error/warning. |
expand | boolean | false | Show expanded stacked toasts. |
closeButton | boolean | false | Show a close button on each toast. |