ns-ui

Undo Ghost Row

A deleted list row leaves a dashed retinal ghost in its exact place that slowly closes over 8 seconds — remaining height is remaining time, and clicking it any time before it vanishes restores the row with a spring.

Use when Inline post-delete undo, spatially anchored exactly where the deleted row was, with no toast: the ghost's shrinking height literally is the remaining undo window. Reach for confirm-hold-ink instead when the goal is gating destruction before it happens (press-and-hold) rather than offering a recovery window after it already occurred.

Install

npx shadcn add https://design.helpmarq.com/r/undo-ghost-row.json
  • list
  • undo
  • destructive
  • delete
  • accessibility
  • micro-interaction

ns-ui / undo-ghost-row

Shared documents

5 files

  • Kickoff notes

    Edited 2 days ago

  • Budget draft v3

    Edited yesterday

  • Vendor contract — Meridian

    Edited 6 hours ago

  • Design brief

    Edited 6 hours ago

  • Launch checklist

    Edited 20 minutes ago

delete one — the ghost holds its undo for 8s, hover or focus pauses it

Props

PropTypeDefaultDescription
itemsAfterImageItem[]——
ghostMs?number—ms the ghost takes to collapse to zero height and finalize the delete
onDelete?(item: AfterImageItem) => void——
onRestore?(item: AfterImageItem) => void——
onExpire?(item: AfterImageItem) => void—fires once the ghost window elapses (or is dismissed) and the item is gone for good
className?string——
Back to the catalog