Premium & Brand

Morphing Popover

Trigger that morphs into a non-modal dialog surface.

Import

tsx

import { MorphingPopover, MorphingPopoverTrigger, MorphingPopoverContent, MorphingPopoverClose, MorphingPopoverHeader, MorphingPopoverBody, MorphingPopoverFooter, MorphingPopoverButton } from "@cooud-ui/ui";

bash

npx cooud-ui add morphing-popover

Examples

Feedback

The trigger physically morphs into a small non-modal dialog instead of fading in beside it. Inside: an accessible, labelled textarea and a footer that pairs Close with a submit. Focus moves into the surface on open and returns to the trigger on close; Escape and outside-click both dismiss. Submit is local-only — it flips to a thank-you state and auto-closes. Honours reduced-motion.

Add the component with the CLI or copy the dependencies and source manually.

Copy the registry item into your app with its source-owned dependencies.

bash

npx cooud-ui add morphing-popover

tsx

function FeedbackPopover() {
  const [open, setOpen] = useState(false);
  const [note, setNote] = useState("");
  const [sent, setSent] = useState(false);
  const fieldId = useId();

  return (
    <MorphingPopover
      open={open}
      onOpenChange={(next) => {
        setOpen(next);
        if (next) setSent(false);
      }}
    >
      <MorphingPopoverTrigger>
        <MessageSquarePlus aria-hidden="true" className="size-4" />
        Feedback
      </MorphingPopoverTrigger>
      <MorphingPopoverContent aria-label="Send feedback" className="w-[22rem]">
        {sent ? (
          <MorphingPopoverBody className="items-center gap-1 py-10 text-center">
            <Sparkles aria-hidden="true" className="size-5 text-primary" />
            <p className="text-sm font-medium text-fg">Thanks for the note!</p>
            <p className="text-xs text-fg-tertiary">We read every message.</p>
          </MorphingPopoverBody>
        ) : (
          <form
            onSubmit={(event) => {
              event.preventDefault();
              setSent(true);
              setNote("");
              window.setTimeout(() => setOpen(false), 1200);
            }}
          >
            <label htmlFor={fieldId} className="sr-only">
              Your feedback
            </label>
            <textarea
              id={fieldId}
              value={note}
              onChange={(event) => setNote(event.target.value)}
              rows={5}
              placeholder="Add feedback"
              className="block w-full resize-none bg-transparent px-4 pt-4 text-sm text-fg outline-none placeholder:text-fg-tertiary"
            />
            <MorphingPopoverFooter className="justify-between border-t-0 px-3 pb-3 pt-1">
              <MorphingPopoverClose />
              <Button type="submit" size="sm" variant="outline" disabled={note.trim().length === 0}>
                Submit
              </Button>
            </MorphingPopoverFooter>
          </form>
        )}
      </MorphingPopoverContent>
    </MorphingPopover>
  );
}

Quick actions

A poppy menu: the trigger morphs into a compact list of MorphingPopoverButton rows with leading lucide icons. Each row closes the surface on activation. Full keyboard + screen-reader support comes from the dialog wiring (aria-haspopup/expanded/controls, focus trap-in/return).

Add the component with the CLI or copy the dependencies and source manually.

Copy the registry item into your app with its source-owned dependencies.

bash

npx cooud-ui add morphing-popover

tsx

function QuickActions() {
  const [open, setOpen] = useState(false);
  const actions = [
    { id: "edit", label: "Edit", icon: Pencil },
    { id: "duplicate", label: "Duplicate", icon: Copy },
    { id: "share", label: "Share", icon: Share2 },
  ];

  return (
    <MorphingPopover open={open} onOpenChange={setOpen}>
      <MorphingPopoverTrigger>
        Actions
        <ArrowRight aria-hidden="true" className="size-4" />
      </MorphingPopoverTrigger>
      <MorphingPopoverContent aria-label="Quick actions" className="w-56">
        <MorphingPopoverBody className="gap-0.5 p-1.5">
          {actions.map(({ id, label, icon: Icon }) => (
            <MorphingPopoverButton key={id} onClick={() => setOpen(false)}>
              <Icon aria-hidden="true" />
              {label}
            </MorphingPopoverButton>
          ))}
          <div className="my-1 h-px bg-border" />
          <MorphingPopoverButton
            onClick={() => setOpen(false)}
            className="text-fg-secondary hover:text-fg"
          >
            <Trash2 aria-hidden="true" />
            Delete
          </MorphingPopoverButton>
        </MorphingPopoverBody>
      </MorphingPopoverContent>
    </MorphingPopover>
  );
}

API Reference

Generated from the component's exported types.

MorphingPopoverProps

Extends HTMLAttributes<HTMLDivElement>

Prop	Type	Default	Description
`open`	`boolean`	—	Controlled open state. When provided, the component is fully controlled.
`defaultOpen`	`boolean`	`false`	Initial open state for the uncontrolled case.
`onOpenChange`	`(open: boolean) => void`	—	Called whenever the open state should change (controlled or not).
`transition`	`Transition`	`MORPHING_POPOVER_TRANSITION`	Override the morph spring (advanced — defaults to the Cooud morph spring).
`reducedMotion`	`"user" \| "always" \| "never"`	`"user"`	How `prefers-reduced-motion` is honoured. Defaults to `"user"`: users who opt out get a fade instead of the layout morph. Pass `"never"` to always play the morph (e.g. a showcase that must demonstrate the animation), or `"always"` to force the reduced variant for everyone.
`children`	`ReactNode`	—	—

MorphingPopoverTriggerProps

Extends Omit< React.ComponentPropsWithoutRef<typeof motion.button>, "ref" | "children" | "onClick" >

Prop	Type	Default	Description
`children`	`ReactNode`	—	—
`onClick`	`(event: React.MouseEvent<HTMLButtonElement>) => void`	—	Extra click handler; runs alongside the open toggle.

MorphingPopoverContentProps

Extends Omit<React.ComponentPropsWithoutRef<typeof motion.div>, "ref" | "children">

Prop	Type	Default	Description
`children`	`ReactNode`	—	—
`aria-label`	`string`	—	Accessible name when the content has no visible heading to point at.
`aria-labelledby`	`string`	—	Id of a visible heading element (e.g. a ).