KQ-844 · DELETE/FADE

Delete Fade

A thread whose messages can be deleted with a moment to undo. Deleting dims the bubble on a tween while the row's measured height glides on glide down to a chip with a ring that drains linearly across the undo window, the word Deleted, and an Undo button; hovering or keyboard-focusing the chip holds the ring. Undo brings the bubble back with a rise on recoil, while running out tells the parent to drop the message and the row exits on the exit ease with no bounce. Delete controls are buttons named by sender and first words, focus moves to Undo and back, and a status region speaks deleted, restored, and removed.

KQ-844 · DELETE/FADE

Marta
Refund for order 4471 went out at 09:12.
09:14
Thanks. Did the customer get the note?
09:15
Rui
Sent from the Waylight Pay dashboard, copy in the thread.
09:16
Marta
Ignore my earlier number, it was 4417.
09:17

4 messages · 0 pending · 0 removed

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/delete-fade

Props

messages: DeleteMessage[]; default —; The thread, oldest first: id, from (a name, or "me" for the own bubble), text, and an optional formatted time. Drop a message here from onExpire.
undoWindow: number; default 5000; Milliseconds the ring drains before the delete is final.
onDelete: (id: string) => void; default —; Fires on the delete press; the message stays in the thread as a pending chip.
onUndo: (id: string) => void; default —; Fires when Undo is pressed and the bubble is restored.
onExpire: (id: string) => void; default —; Fires when the ring runs out; remove the message from messages here.
label: string; default —; Names the thread list for assistive technology.

Prop	Type	Default	Description
messages	DeleteMessage[]	—	The thread, oldest first: id, from (a name, or "me" for the own bubble), text, and an optional formatted time. Drop a message here from onExpire.
undoWindow	number	5000	Milliseconds the ring drains before the delete is final.
onDelete	(id: string) => void	—	Fires on the delete press; the message stays in the thread as a pending chip.
onUndo	(id: string) => void	—	Fires when Undo is pressed and the bubble is restored.
onExpire	(id: string) => void	—	Fires when the ring runs out; remove the message from messages here.
label	string	—	Names the thread list for assistive technology.