Motion UIComponentsComponent

Toast stack

Toasts that fan into a scaled pile at the bottom of the screen and settle on a shared spring.

API reference

Components

`<Toast />`

One stacked card. Hidden toasts stay mounted, aria-hidden, and pointer-inert.

`children?`

ReactNode

Toast face. Toast only moves it.

`className?`

string

Extra classes on the animated card.

`<ToastStack />`

Fixed stack viewport. Gaps are pointer-inert; each visible toast re-enables clicks.

`children?`

ReactNode

Toast children, newest first.

`maxVisible?`

number = 4

Visible count before the rest hide. Default 4.

`stackOffsetY?`

number = 10

Vertical offset per step, in px. Default 10.

`stackScale?`

number = 0.06

Scale shed per step. Default 0.06.

`stackOpacity?`

number = 0.2

Opacity shed per step. Default 0.2.

`expandedGap?`

number = 8

Gap between toasts, in px, while the stack is fanned out. Default 8.

`className?`

string

Extra classes on the fixed viewport.

Hooks

`useToastStack`

Headless toast queue. Newest toasts are prepended.

useToastStack(): UseToastStackResult

Returns

`toasts`

ToastItem[]

Toast ids, newest first.

`add`

() => ToastItem

Push a toast onto the front of the queue.

`dismiss`

(id: ToastItem) => void

Remove the toast with this id.

`useToast`

Whether the enclosing toast is in the visible window. Hidden toasts should drop interactive controls from the tab order.

useToast(): ToastVisibility

Featured in

See the toast stack composed into full sections.

Toast stackAnimated with hardware accelerated transforms and opacity, styled with your existing design tokens