Dialog

Renders animated dialog and alert dialog components with headers, descriptions, and actions. Displays content in a centered panel with transitions. Use for modals requiring visual feedback and user interaction.

byEdu Calvo from Smoothui

Installation

terminal

pnpm dlx layro-cli add @educlopez/dialog

npx layro-cli add @educlopez/dialog

npx layro-cli add @educlopez/dialog

bunx layro-cli add @educlopez/dialog

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Dependencies

Demo

"use client";

import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog";
import { Dialog as DialogPrimitive } from "@base-ui/react/dialog";
import { cn } from "@/lib/utils";
import { X } from "lucide-react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
import {
  type ComponentProps,
  isValidElement,
  type ReactElement,
  type ReactNode,
  useCallback,
  useEffect,