transparency0 ultra clear, 1 tinted0.3

Shader

blurshader blur, px4

Icon

Disabled

Morphing Popover

New

A Liquid Glass pill that swells into a panel holding anything: a form, a picker, a note.

Install it in one line

Available in v1.9.0

npx devignerui add morphing-popover

Writes components/ui/morphing-popover.tsx and lists what it needs.

First time here

npx devignerui init

Or by hand

Needs React 18 or 19 and Tailwind CSS v4.
Install the dependencies.
npm i cn motion devignerui
Paste the source from into components/ui/morphing-popover.tsx.

Some of these designs take cues from interfaces we've admired around the web. If one started as your idea and you'd like credit, message us on X @devignerui or in the Discord and we'll add it.

Usage

import { IconAddCircle } from "@devigner-ui/icons";
import { MorphingPopover } from "@/components/ui/morphing-popover";

// The shader bends this image; area is a ref to the element it fills.

export function Example() {
  return (
    <MorphingPopover
      label="Add note"
      icon={<IconAddCircle />}
      transparency={0.3}
      backdrop={{ src: photo, area }}
    >
      {(close) => (
        <form onSubmit={(e) => { e.preventDefault(); close(); }}>
          <textarea aria-label="Note" />
          <button type="button" onClick={close}>Cancel</button>
          <button type="submit">Save note</button>
        </form>
      )}
    </MorphingPopover>
  );
}

Custom composition

<MorphingPopover label="Share" icon={<IconShare />} transparency={0.6}>{panel}</MorphingPopover>

A rename form that closes on save

Use the render prop to close the panel from the form's own buttons.

import { MorphingPopover } from "@/components/ui/morphing-popover";

export function Rename({ name, onRename }: { name: string; onRename: (next: string) => void }) {
  return (
    <MorphingPopover label="Rename">
      {(close) => (
        <form
          className="flex w-60 flex-col gap-2"
          onSubmit={(e) => {
            e.preventDefault();
            const next = new FormData(e.currentTarget).get("name");
            if (typeof next === "string" && next.trim()) onRename(next.trim());
            close();
          }}
        >
          <input name="name" defaultValue={name} aria-label="Name" className="rounded-xl px-3 py-2" />
          <button type="submit">Save</button>
        </form>
      )}
    </MorphingPopover>
  );
}

Every prop

label-

string

Text on the closed pill, and the panel's accessible name.

icon-

ReactNode

Shown before the label on the pill.

children-

ReactNode | (close) => ReactNode

What the panel holds. Pass a function to get close, for a Cancel or Save button inside.

open-

boolean

Controlled open state. Pass with onOpenChange.

defaultOpenfalse

boolean

Open on first render when uncontrolled.

onOpenChange-

(open: boolean) => void

Called when the panel opens or closes.

transparency0.05

number

How tinted the glass is, from 0 (ultra clear) to 1 (fully tinted).

backdrop-

GlassBackdrop

Draws the glass with a WebGL shader instead: { src?, area }, an image and a ref to the element it fills like object-fit: cover. transparency tints it the same way.

blur4

number

How far the shader glass blurs the backdrop, in px. Only with backdrop.

disabledfalse

boolean

Disables the pill and closes the panel.

classNames-

MorphingPopoverClassNames

Slot classes: trigger (the label and icon on the pill) and panel (the box around the content).

How to use it

The live demo is an Add note pill on the dot field. Click it and the glass swells into a note form with Cancel and Save note; saving melts it back into the pill and shows Note saved underneath. On the component page the preview opens on the shader glass over a night photo, with Settings to switch back to the page lens.

When to use it

A small task that belongs next to its trigger: add a note, rename, share, set a reminder.
Anywhere Liquid Glass is the look and a plain popover would break it.

When to reach for something else

Long forms or anything that needs scrolling. Use a dialog or a page.
A list of actions. Use Liquid Glass's menu, which handles arrow keys between rows.

Keyboard

Enter / Space: Opens the panel from the pill and moves focus to its first field or button.
Tab: Moves through the panel. Tabbing out of it closes it.
Escape: Closes the panel and returns focus to the pill.

Accessibility

The pill is a button with aria-haspopup="dialog" and aria-expanded; the panel is a non-modal dialog named by label.
Closed, the panel is inert, so nothing in it can be focused or read until it opens.
Closing with Escape or through close returns focus to the pill.
Under prefers-reduced-transparency the glass turns into a solid tint.
Honors prefers-reduced-motion and an ancestor <MotionConfig reducedMotion="always">, so an in-app motion switch works too.

Theming

The glass is the same as Liquid Glass's: transparency runs from ultra clear (0) to fully tinted (1), and the tint is your background color.
Only Chromium bends the page through the rim; Safari and Firefox get frosted glass.
With backdrop the glass is drawn by the same WebGL shader as Liquid Glass's, over that image instead of the page, and it works in every browser with WebGL. blur sets how far it softens the image.
It swells open and melts back on TWEEN_GLASS_SOFT, a sampled spring about 6% past its size that settles in 1s.
classNames.trigger styles the pill's label and icon, and classNames.panel the box around the content, which pads 16px.
The panel's text uses foreground. Style the content inside it like any other markup.

Edge cases

The pill fits its label and the panel fits its content, measured again whenever either changes size.
The panel swells out from the pill's center, as far each way, so leave room around the pill or place it where an overlap is fine.
A press anywhere outside closes the panel without moving focus.
disabled closes an open panel; enabling it again doesn't reopen it.

Troubleshooting

The glass looks frosted, not bent.

Only Chromium renders the lens. Safari and Firefox get frosted glass by design, and so does anyone with reduced transparency on.

The panel is cut off.

It grows past the pill's box on every side. Remove overflow-hidden from the pill's ancestors, or give the pill room.

The component renders with no background or the wrong colors.

Colors use the standard shadcn/ui tokens only (background, foreground, primary, secondary, muted, accent, border, input, ring, destructive), so a project set up with shadcn/ui needs nothing extra and the component follows its theme, dark mode included. Without shadcn/ui, define those CSS variables for :root and .dark and map them in your Tailwind v4 @theme, or run npx shadcn init.

Stuck on something else? Ask in the Discord.