Toast
FREENotifications from anywhere with toast(): types, actions, promises, pause on hover and swipe to dismiss.
Installation
Terminal
npx @bloxa/cli add toast
# or: npx shadcn@latest add @bloxa/toastPackages installed automatically: motion
Examples
Types
Hover pauses the timer; swipe sideways to dismiss.
Undo action
Promise
The same toast moves from loading to the result.
API reference
Every component also accepts the props of the element it renders.
toast()
toast.success / info / warning / error / loading / promise / dismiss. Returns an id; calling with the same id updates it.
| Prop | Type | Default | Description |
|---|---|---|---|
| description | ReactNode | — | Second line. |
| duration | number | 4000 | Lifetime in ms; Infinity stays open. |
| action | { label, onClick } | — | One action button. |
| icon | ReactNode | null | — | Custom icon, or none. |
| id | string | number | — | Id to update an existing toast. |
Toaster
Mount once in the root layout.
| Prop | Type | Default | Description |
|---|---|---|---|
| position | "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right" | "bottom-right" | Where on screen. |
| duration | number | 4000 | Default lifetime in ms. |
| visible | number | 4 | Toasts visible at once. |
| closeButton | boolean | true | × on every toast. |
| showProgress | boolean | true | Time-left bar. |