nessra uinessra ui

A modal dialog that interrupts the user with important content.

Loading...
import {
  AlertDialog,
  AlertDialogAction,

Installation

pnpmnpmyarnbun
pnpm dlx shadcn@latest add https://nessra-ui.vercel.app/r/alert-dialog.json

Usage

import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog"
<AlertDialog>
  <AlertDialogTrigger>Open</AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
      <AlertDialogDescription>
        This action cannot be undone.
      </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Cancel</AlertDialogCancel>
      <AlertDialogAction>Continue</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

Examples

Delete Confirmation

Loading...
import {
  AlertDialog,
  AlertDialogAction,

API Reference

Alert Dialog

ComponentDescription
AlertDialogThe root component
AlertDialogTriggerThe trigger element
AlertDialogContentThe dialog content
AlertDialogHeaderHeader section
AlertDialogTitleThe dialog title
AlertDialogDescriptionDescription text
AlertDialogFooterFooter with actions
AlertDialogActionConfirm action button
AlertDialogCancelCancel action button

AlertDialog Props

PropTypeDefaultDescription
openboolean-The controlled open state
defaultOpenboolean-The default open state
onOpenChange(open: boolean) => void-Callback when open changes