Components

Toast

Short messages that confirm an action or report a problem, with an optional action like Undo. They stack into a deck that fans out when pointed at, and swipe away.

Import

import { ToastProvider } from '@rinzai/zen';

API reference

<ToastProvider>

Mount once near the root; useToast() works anywhere inside. Toasts stack in a deck in the corner, newest in front with up to two peeking out behind; it fans out while pointed at or focused, and the countdowns wait meanwhile. Swipe a toast right to dismiss it.

Prop	Type	Default
`offset` Gap between the toasts and the bottom of the screen on phones (a CSS length, default 1rem), e.g. "5.5rem" to clear a bottom tab bar.	`string`	`—`
`viewportClassName` Classes for the column the toasts stack in (position, width…).	`string`	`—`