Morph Dialog

Component

About

A card or tile that expands in place into a modal dialog using a FLIP transform, then collapses back onto itself when closed.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Morph Dialog to your project and fits it to your theme.

Code

How Morph Dialog is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import { MorphDialog } from "@/components/ui/morph-dialog";

function AccountCard({ name, balance }: { name: string; balance: string }) {
  return (
    <div className="flex flex-col gap-3 rounded-[var(--radius-card)] border border-line bg-surface p-5 shadow-[var(--shadow-card)]">
      <div className="flex items-center justify-between">
        <span className="text-[13px] font-bold text-ink">{name}</span>
        <span className="text-[11px] font-medium text-ink-faint">
          Tap to expand
        </span>
      </div>
      <span className="text-[22px] font-extrabold tracking-[-0.02em] text-ink">
        {balance}
      </span>
    </div>
  );
}

function Row({ label, value }: { label: string; value: string }) {
  return (
    <div className="flex items-center justify-between rounded-[var(--radius-tile)] bg-surface-muted px-4 py-3">
      <span className="text-[13px] font-bold text-ink-soft">{label}</span>
      <span className="text-[13px] font-bold text-ink">{value}</span>
    </div>
  );
}

export default function MorphDialogDemo() {
  return (
    <div className="flex min-h-screen w-full items-center justify-center bg-app p-10">
      <div className="grid w-full max-w-md grid-cols-1 gap-4 sm:grid-cols-2">
        <MorphDialog
          trigger={<AccountCard name="Everyday" balance="$27,829.83" />}
          title="Everyday"
          description="Your everyday spending account."
        >
          <div className="flex flex-col gap-3 py-2">
            <Row label="Available balance" value="$27,829.83" />
            <Row label="Account number" value="•••• 4821" />
            <Row label="Last transaction" value="Coffee — $4.50" />
          </div>
        </MorphDialog>

        <MorphDialog
          trigger={<AccountCard name="Savings" balance="$6,120.00" />}
          title="Savings"
          description="Set aside for later."
        >
          <div className="flex flex-col gap-3 py-2">
            <Row label="Available balance" value="$6,120.00" />
            <Row label="Interest rate" value="3.25% APY" />
            <Row label="Goal" value="$10,000 by Dec" />
          </div>
        </MorphDialog>
      </div>
    </div>
  );
}