Components

Morphing Tray

Pro

A floating tray that re-shapes itself as you move between steps — the container's height morphs on a spring while views cross-fade through blur. The Family wallet drawer.

Step through the flow — the tray re-shapes around each view.

Installation

ProRequires a Planes Pro license.
npx shadcn add @useplanes/morphing-tray

Unlock with Planes Pro

$99 once · 80 Pro components · lifetime updates.

I have a licenseGet Pro
const [open, setOpen] = useState(false);
const [view, setView] = useState("options");

<MorphingTray
  fixed
  open={open}
  onClose={() => setOpen(false)}
  view={view}
  views={[
    {
      key: "options",
      title: "Wallet options",
      content: <button onClick={() => setView("confirm")}>Remove wallet…</button>,
    },
    {
      key: "confirm",
      title: "Remove wallet?",
      content: (
        <>
          <button onClick={() => setView("options")}>Cancel</button>
          <button onClick={() => setOpen(false)}>Remove</button>
        </>
      ),
    },
  ]}
/>

Use cases

  • Wallet and key flows

    The canonical Family pattern — options, warnings, and confirmations in one panel that re-shapes per step.

  • Multi-step confirmations

    Delete flows and irreversible actions where each step has different content heights.

  • Compact onboarding

    A three-step setup that stays anchored in place instead of jumping between modals.

  • Contextual pickers

    Settings that drill into detail views and back without a full navigation stack.