Layers
Alerter
Overview
Imperative notice dialog with a single OK action—an in-app alternative to window.alert(). Use
alert() to show a title, an optional HTML description, a button variant, and an OK label.
There is no cancel button, loading state, or return value.
Install
Configure your registry in components.json:
{
"registries": {
"@uxio": "https://ui.uxio.dev/r/styles/{style}/{name}.json"
}
}Then run:
npx shadcn@latest add @uxio/alerterConfiguration
alert() accepts AlerterOptions:
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | — | Dialog title (required). |
description | string | — | Optional body HTML (rendered with dangerouslySetInnerHTML). |
variant | AlertDialogAction variant | — | When set, shows a themed icon strip above the title (e.g. default, success, info, warning, destructive). Omit to hide that media row. |
okButtonTitle | string | "OK" | Label for the single action button. |
Usage
Place <Alerter /> once in your root layout (e.g. Next.js app/layout.tsx, TanStack Start
root, or the top-level route that wraps the whole app). It must stay mounted so alert() can open
the dialog from anywhere.
// app/layout.tsx (or equivalent root layout)
import { Alerter } from "@/components/ui/alerter"
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>
{children}
<Alerter />
</body>
</html>
)
}Then call alert() from any component. Use window.alert() if you need the native dialog.
alert({
title: "Saved",
description: "Your changes were stored successfully.",
variant: "default",
okButtonTitle: "Got it",
})