Skip to component
GGamma

Morph dialog

A trigger card grows into a modal dialog and folds back when it closes.

New
Live previewUse keyboard to interact

Implementation

1"use client";2 3import {4  addTransitionType,5  startTransition,6  useId,7  useLayoutEffect,8  useRef,9  useState,10} from "react";11import type { PointerEvent, ReactNode } from "react";12import { ViewTransitionSafe } from "./ViewTransitionSafe";13 14const shellShare = {15  "morph-dialog-close": "vt-move vt-expand vt-quick",16  default: "vt-move vt-expand",17} as const;18 19export type MorphDialogProps = {20  /** Card content; the whole card is the button that opens the dialog. */21  trigger: ReactNode;22  /** Accessible name for the trigger when its content is not enough. */23  triggerLabel?: string;24  /** Dialog heading. */25  title: ReactNode;26  /** Short line under the title. */27  description?: ReactNode;28  /** Dialog body. */