ns-ui
Deleted list row collapses in place to a thin labeled bar that drifts toward the trailing edge over the grace window — distance traveled is the only clock, and pressing the bar pulls it back.
Use when Inline post-delete undo where the recovery window is read spatially rather than numerically: the deleted row becomes a compact bar, staying in its original list slot, whose horizontal position is the remaining time — no digits anywhere in the default state. Reach for undo-ghost-row instead when a shrinking-height ghost (vertical collapse to zero, no horizontal travel) fits the layout better; reach for countdown-vapor-digits instead when the thing being communicated is an actual live clock, not a one-shot undo window.
Install
npx shadcn add https://design.helpmarq.comns-ui / undo-drift-bar
The soft failure modes of caching
Notes on distributed consensus
Why most onboarding flows leak
A short history of the undo button
Debugging clock drift in production
delete one — the bar holds its position, drifting right over 6s; hover, focus, or press it to pull it back
| Prop | Type | Default | Description |
|---|---|---|---|
| items | UndertowItem[] | — | — |
| graceMs? | number | — | ms the collapsed bar takes to drift fully across before the delete commits |
| onDelete? | (item: UndertowItem) => void | — | — |
| onRestore? | (item: UndertowItem) => void | — | — |
| onExpire? | (item: UndertowItem) => void | — | fires once the grace window elapses (or the bar is dismissed) and the item is gone for good |
| className? | string | — | — |