Toast

Lightweight toasts via toast() or useToast(). Wrap your app with ToastProvider (see Next.js example below). Complete Initialization first, then use the CLI or copy the source below.

Preview

Toasts appear at the bottom-right of the viewport.

Live

Add Toast via CLI

After init and layout theme wiring, add the toast module and wire ToastProvider in your root layout (or a client providers.tsx):

npm exec -- my-ui add toast

Component source

<div class="ui-toast-region" aria-live="polite" aria-label="Notifications">
  <div role="status" class="ui-toast ui-toast--success">
    <div class="ui-toast__row">
      <div class="ui-toast__body">
        <div class="ui-toast__title">Saved</div>
        <div class="ui-toast__desc">Your work was saved.</div>
      </div>
      <button type="button" class="ui-toast__close" aria-label="Dismiss notification">×</button>
    </div>
  </div>
</div>