Toaster

Display global toast() notifications in six positions with stacking motion and a visible-item limit.

We are building SnowUI components into interfaces people can use directly in AI conversations. Conversational UI is still in development; this page demonstrates website usage. Supported chat platforms and component versions will be announced after verification. Generating and using SnowUI interfaces inside AI conversations is completely free. It is not a project, uses no project or developer-seat quota, and requires no SnowUI registration, activation, or paid proof.

How to use

Use Toaster as the display host for Toast notifications, coordinating their queue and layout. Organize an ordinary notification list in the business page instead of turning every historical message into a transient Toast.

Mount Toaster as the notification host and create messages with toast. maxVisible limits the number shown simultaneously.
Notifications created in one runtime share a queue. Mount one Toaster at the application root and reuse it across page regions; multiple hosts display duplicate copies of the same notification.
offset and gap control position and stacking spacing. parts configures generated Toast appearance and Text labels for string notifications; explicit appearance on one message takes priority.

Import

import { Toaster } from '@snowui-design-system/components';

Usage

Positions

Stacking

Auto-dismiss and persistent

API Reference

Property	Type	Default	Example	Description
`offset`	`number`	`16`	`offset={42}`	Distance from the viewport edge to the Toast region, in pixels.
`maxVisible`	`number`	`3`	`maxVisible={42}`	Maximum number of visible layers in one position. Does not limit how many messages toast() can enqueue; when full, a new Toast pushes out the current last visible layer.
`gap`	`number`	`8`	`gap={42}`	Visual offset between Toasts in the same position, in pixels.
`scaleStep`	`number`	`0.05`	`scaleStep={42}`	Scale reduction factor for each stacked layer. At index=1, the default scale is 0.95.
`stackOpacityStep`	`number`	`0.2`	`stackOpacityStep={42}`	Opacity reduction factor for each stacked layer. The second and third layers default to 0.8 and 0.6.
`stackMinOpacity`	`number`	`0.6`	`stackMinOpacity={42}`	Minimum opacity for a stacked entry.
`stackDuration`	`number`	`300`	`stackDuration={42}`	Duration of the combined stacking animation, in milliseconds.
`stackEasing`	`string`	`"ease"`	`stackEasing="Example"`	Easing for the combined stacking animation.
`width`	`number \| string`	`—`	`width="Example"`	Width of the Toast region. By default it hugs content; an explicit value can fix the width. On narrow screens it is capped at calc(100vw - 2rem).
`parts`	`ComponentPartsOf<{ Toast: typeof Toast; Text: typeof Text }>`	`—`	`parts={partsOptions}`	Configure generated Toasts and Text labels for text strings. Text defaults to lines=1; explicit children do not read parts.Text. Toaster owns queue data, position, and dismissal; explicit notification Props take priority.