Confirm morph

Free

A destructive action that morphs into its own confirmation, with undo.

Installs components/ui/confirm-morph.tsxDepends on lucide-reactMotion none in component source

pnpm dlx shadcn@latest add https://caliperui.site/r/confirm-morph.json

Nothing deleted yet.

When to use #

Use it for

Deleting or removing one thing where a dialog would be heavy.
You want pending, done, error and undo states in one control.

Skip it when

The action is routine and harmless; use a button.
The action is catastrophic; use hold to confirm or a dialog.

Installation #

terminal

pnpm dlx shadcn@latest add https://caliperui.site/r/confirm-morph.json

Adds its 2 files to components/ui/, each with its own stylesheet, and installs their packages. No account needed. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

This is the code behind the preview above.

example.tsx

import { Trash2 } from "lucide-react"
import { useState } from "react"
import { ConfirmMorph } from "@/components/ui/confirm-morph"

export function DeleteDraft() {
  const [status, setStatus] = useState("Nothing deleted yet.");
  return (
    <div className="grid justify-items-center gap-3">
      <ConfirmMorph
        label="Delete draft"
        icon={<Trash2 aria-hidden="true" />}
        prompt="Delete this draft?"
        onConfirm={async () => setStatus("Draft deleted.")}
        onUndo={async () => setStatus("Draft restored.")}
      />
      <p role="status" className="text-sm text-muted-foreground">{status}</p>
    </div>
  );
}

API reference #

ConfirmMorph

component

PropTypeDefault

label *ReactNode—

iconReactNode—

promptReactNode—

confirmLabelstring"Delete"

cancelLabelstring"Cancel"

pendingLabelstring"Deleting"

doneLabelstring"Deleted"

errorLabelstring"Couldn’t finish"

retryLabelstring"Retry"

undoLabelstring"Undo"

tone"neutral" | "danger""danger"

onConfirm(() => void | Promise<void>)—

onUndo(() => void | Promise<void>)—

onCancel(() => void)—

confirmTimeoutnumber6000

resultTimeoutnumber5000

disabledbooleanfalse

classNamestring—

Motion #

It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.