RadCN
Overlaysreadycomponentready

Alert Dialog

A dependency-free destructive confirmation dialog with alertdialog semantics, non-dismissible defaults, and explicit action/cancel controls.

Importimport { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger } from 'radcn/alert-dialog'
Preview

Live package example

Render the upstream destructive account deletion confirmation with an outline Show Dialog trigger, exact copy, action/cancel controls, and no media block.

Alert Dialog Demo

Render the upstream destructive account deletion confirmation with an outline Show Dialog trigger, exact copy, action/cancel controls, and no media block.

Preview

Button asChild maps to explicit AlertDialogTrigger styling with radcn-button and radcn-button--outline classes.

import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogOverlay,
  AlertDialogPortal,
  AlertDialogTitle,
  AlertDialogTrigger,
} from 'radcn/alert-dialog'

export function AlertDialogDemo() {
  return (
    <AlertDialog id="alert-dialog-demo">
      <AlertDialogTrigger class="radcn-button radcn-button--outline">
        Show Dialog
      </AlertDialogTrigger>
      <AlertDialogPortal>
        <AlertDialogOverlay />
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
            <AlertDialogDescription>
              This action cannot be undone. This will permanently delete your
              account and remove your data from our servers.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>Cancel</AlertDialogCancel>
            <AlertDialogAction>Continue</AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialogPortal>
    </AlertDialog>
  )
}

Installation

Intended future install command. RadCN is private and not published to npm yet, so this snippet documents the target user-facing API rather than something external consumers can run today.

pnpm add radcn # intended future package
import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger } from 'radcn/alert-dialog'

Theming

RadCN tokens read the resolved theme from the document. Store the user's preference separately, then resolve system preferences to a concrete light or dark theme before setting package tokens.

<html data-radcn-theme-mode="system" data-radcn-theme="dark">
  ...
</html>

Accessibility

  • AlertDialog enhances content to role="alertdialog" with aria-modal when opened in the browser.
  • AlertDialogTitle and AlertDialogDescription provide the labelledby and describedby targets used by the modal enhancement.
  • Destructive confirmations are non-dismissible by default, so Escape and overlay clicks do not close the dialog.
  • Action and cancel controls are native buttons that close through enhanceAlertDialog and return focus to the trigger.

Customization

  • Root, trigger, portal, overlay, content, header, footer, title, description, action, and cancel parts expose public data-radcn hooks and package classes.
  • Button variant="outline" maps to radcn-button and radcn-button--outline classes applied directly to AlertDialogTrigger.
  • Content size defaults to data-size="default"; apps can use size="sm", class, style, and CSS variables for custom sizing and tokens.
  • Responsive header and footer layout maps to package CSS over public header/footer hooks instead of Tailwind utility classes.

Remix 3 Notes

  • React client component markers and Radix AlertDialog map to dependency-free Remix UI markup plus explicit enhanceAlertDialog browser behavior.
  • Button asChild maps to explicit AlertDialogTrigger styling; RadCN does not need a Slot dependency for this example.
  • className maps to class, data-slot maps to data-radcn-alert-dialog* hooks, and cn maps to explicit class composition.
  • Tailwind fixed positioning, overlay/content animation utilities, responsive layout utilities, and size classes map to RadCN package CSS, data-state hooks, data-size, class, style, and CSS variables.
  • AlertDialogMedia is intentionally omitted because upstream alert-dialog-demo has no media block.
  • Vendor source remains read-only evidence and is not imported by RadCN.