ns-ui
A swipeable list row that clicks through machined detent stops — archive, then flag — and strains against a hard stop before overtravel arms delete, with a 3-second undo bar before it commits.
Use when a list row that swipes to reveal graded actions, clicking through machined detent stops (archive, then flag) and straining against a hard stop before overtravel arms delete, with a 3-second undo before it commits; pick reorder-drag-wake instead when the drag moves the row within the list rather than revealing actions, or queue-triage-ratchet when the user is deciding one card at a time out of a stack rather than acting on rows in place.
Install
npx shadcn add https://design.helpmarq.comns-ui / swipe-row-detent
Drag a row left — it clicks through Archive and Flag detents, then resists and arms Delete past the hard stop, with a 3s undo before it commits.
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | — | — |
| subtitle? | string | — | — |
| onArchive? | () => void | — | — |
| onFlag? | () => void | — | — |
| onDelete? | () => void | — | — |
| className? | string | — | — |