Morph Surface

Installation

npx shadcn@latest add @blank-pro/morph-surface

Usage

import {
  MorphSurface,
  MorphSurfaceContent,
  MorphSurfaceDock,
  MorphSurfaceIndicator,
  MorphSurfaceTrigger,
} from "@/components/ui/morph-surface"

<MorphSurface>
  <MorphSurfaceDock>
    <MorphSurfaceIndicator />
    Northwind
    <MorphSurfaceTrigger>Feedback</MorphSurfaceTrigger>
  </MorphSurfaceDock>
  <MorphSurfaceContent>…</MorphSurfaceContent>
</MorphSurface>

One surface, two states. The surface measures whichever state is showing and springs its width, height and radius to fit, while the outgoing state blurs away and the incoming one blurs in. A MorphSurfaceIndicator placed in both states is treated as one element and travels between them.

Where it grows is up to its container: pinned to the bottom of a flex column, as in the demo, it opens upward like a dock. A press outside or Escape closes it, and focus moves into the content on open and back to the trigger on close.

Examples

Confirm an action

The same surface works as a bulk-action bar that asks before it deletes.