Shared Element Transition Dialog

A dependency-free hold-to-delete dialog with shared-element transitions, native dialog semantics, Shadow DOM, and reduced-motion support.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Shared Element Transition Dialog to your project and fits it to your theme.

import SharedElementTransitionDialog from "@/components/ui/shared-element-transition-dialog";

export default function SharedElementTransitionDialogDemo() {
  return (
    <SharedElementTransitionDialog
      open
      showReset
      itemName="North Star project"
      holdDuration={1000}
    />
  );
}