KQ-898 · ARCHIVE/SLIDE

Archive Slide

A channel list where a row can be pushed aside. Dragging a row left uncovers the one action parked under it, whose ink and glyph grow straight from the travel so the commit point is felt before the finger lifts; a short release returns the row on snap, and a release past the threshold hands the rest of the travel to a tween on the exit ease before the rows below close the gap on glide. An undo chip unfolds in flow at the foot of the list against a measured height, and every row keeps an archive button so Delete or Backspace archives without the gesture.

KQ-898 · ARCHIVE/SLIDE

5 showing · 0 archived · drag a row left

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/archive-slide

Props

channels: ArchiveChannel[]; default —; The rows in list order: id, name, preview and an optional unread count.
archived / defaultArchived: string[]; default []; Controlled or initial archived ids; those rows leave the list.
onArchivedChange: (ids: string[]) => void; default —; Fires with the next set from an archive or an undo.
onArchive: (id: string) => void; default —; Fires when a row commits, from the gesture or the button.
onRestore: (id: string) => void; default —; Fires from the undo chip with the channel that came back.
activeChannel / defaultActiveChannel: string; default —; Controlled or initial open channel id.
onChannelSelect: (id: string) => void; default —; Fires from a row press that was a press, not a drag.
threshold: number; default 88; Pixels of travel that commit the archive.
actionLabel: string; default "Archive"; The parked action's copy.
emptyLabel: string; default "Every channel is archived."; The sentence shown when every channel has been put away.
label: string; default —; Names the list for assistive technology.

Prop	Type	Default	Description
channels	ArchiveChannel[]	—	The rows in list order: id, name, preview and an optional unread count.
archived / defaultArchived	string[]	[]	Controlled or initial archived ids; those rows leave the list.
onArchivedChange	(ids: string[]) => void	—	Fires with the next set from an archive or an undo.
onArchive	(id: string) => void	—	Fires when a row commits, from the gesture or the button.
onRestore	(id: string) => void	—	Fires from the undo chip with the channel that came back.
activeChannel / defaultActiveChannel	string	—	Controlled or initial open channel id.
onChannelSelect	(id: string) => void	—	Fires from a row press that was a press, not a drag.
threshold	number	88	Pixels of travel that commit the archive.
actionLabel	string	"Archive"	The parked action's copy.
emptyLabel	string	"Every channel is archived."	The sentence shown when every channel has been put away.
label	string	—	Names the list for assistive technology.