Dialogs, toasts, and overlays

Layer focus-trapped dialogs, contextual help, transient notices, and searchable command execution over an application.

Overview

Layer focus-trapped dialogs, contextual help, transient notices, and searchable command execution over an application.

Installation

npx @mwillbanks/tuil add dialog confirm-dialog tooltip toast command-palette drawer popover skeleton error-boundary

The CLI writes source-owned components beneath the destination configured in tuil.config.ts; the default import below assumes src/components/tuil.

Loading executable example…

Components and subcomponents

API	Signature	Description
`Dialog`	`constant Dialog`	Public constant Dialog.
`Dialog.Trigger`	`subcomponent Dialog.Trigger`	Public subcomponent Dialog.Trigger.
`Dialog.Content`	`subcomponent Dialog.Content`	Public subcomponent Dialog.Content.
`Dialog.Title`	`subcomponent Dialog.Title`	Public subcomponent Dialog.Title.
`Dialog.Description`	`subcomponent Dialog.Description`	Public subcomponent Dialog.Description.
`Dialog.Confirm`	`subcomponent Dialog.Confirm`	Public subcomponent Dialog.Confirm.
`Dialog.Cancel`	`subcomponent Dialog.Cancel`	Public subcomponent Dialog.Cancel.
`ConfirmDialog`	`function ConfirmDialog`	Public function ConfirmDialog.
`Tooltip`	`function Tooltip`	Public function Tooltip.
`ToastProvider`	`function ToastProvider`	Public function ToastProvider.
`useToast`	`function useToast`	Public function useToast.
`Toast`	`function Toast`	Public function Toast.
`ToastViewport`	`function ToastViewport`	Public function ToastViewport.
`CommandPalette`	`function CommandPalette`	Public function CommandPalette.
`Drawer`	`constant Drawer`	Public constant Drawer.
`Popover`	`constant Popover`	Public constant Popover.
`Skeleton`	`function Skeleton`	Public function Skeleton.
`ErrorBoundary`	`class ErrorBoundary`	Public class ErrorBoundary.

Interaction

The top overlay receives input before application hotkeys. Escape closes dismissible overlays and focus returns to the prior node.

API and events

Open state and selections flow through onOpenChange, onPress, command callbacks, and the toast API.

Every interactive component publishes semantic roles, labels, state, and focus identity through the renderer's SemanticRegistry. Callback failures flow to the owning application's error boundary.

Documentation flow diagram. props and runtime state; semantic registration; focus and input routing; callback or state update; rerender; S0 leads to S1; S1 leads to S2; S2 leads to S3 — **Documentation flow diagram.** props and runtime state; semantic registration; focus and input routing; callback or state update; rerender; S0 leads to S1; S1 leads to S2; S2 leads to S3

Example

import type { ComponentProps } from "react";
import { Dialog } from "@/components/tuil/feedback/overlays";

export function Example(props: ComponentProps<typeof Dialog>) {
  return <Dialog {...props} />;
}

Registry-installed components are source-owned: customize the generated file in your application, and use the package reference for the shared runtime contracts.