Sonner

Overview

Sonner and Toast share one underlying brain: the Navius Toast primitive. ZitsSonner is a thin convenience wrapper that composes ZitsToastProvider (renders NaviusToastProvider) and ZitsToastViewport (renders NaviusToastViewport) in one shot, so it is mounted once near the app root and ZitsToast children are rendered inside it. The auto-close timer, swipe-to-dismiss, pause-on-hover, and assistive-tech announcer all come from the same brain documented under Toast. For imperative toasts, inject the Navius ToastManager and call Add(...): same queue, same timers.

Install

navius add sonner --to ./src/MyApp --namespace MyApp.Ui

Usage

<ZitsSonner>
    <ZitsButton Variant="outline" OnClick="@(() => Show())">Show toast</ZitsButton>

    @foreach (var t in _toasts)
    {
        <ZitsToast @key="t.Id" Open="true"
                   Variant="@(t.Kind == "error" ? "destructive" : "default")"
                   OpenChanged="@(open => OnOpenChanged(t.Id, open))" Timeout="4000">
            <ZitsToastTitle>@t.Title</ZitsToastTitle>
            <ZitsToastClose />
        </ZitsToast>
    }
</ZitsSonner>

Parts and props

ZitsSonner wraps the provider + viewport; every parameter forwards straight through to the composed ZitsToastProvider, unchanged.

Prop	Type	Default	Description
`Limit`	`int`	`1`	Max simultaneously-visible toasts; forwarded to `ZitsToastProvider`.
`Timeout`	`int`	`5000`	Default auto-close duration in ms; forwarded to `ZitsToastProvider`.
`Label`	`string`	`"Notification"`	Forwarded to `ZitsToastProvider`.
`SwipeDirection`	`string`	`"right"`	Forwarded to `ZitsToastProvider`.
`SwipeThreshold`	`double`	`50`	Forwarded to `ZitsToastProvider`.

Styling surface

Attributes on ZitsSonner splats onto the composed ZitsToastViewport, not the provider (which renders no DOM of its own). There are no variant/size parameters on ZitsSonner itself; toast variants are set per ZitsToast (see the Toast manifest).

Data attribute hooks

Sonner itself emits no data-* attributes; the state hooks live on the composed ZitsToast/ ZitsToastViewport parts (see the Toast manifest).