KQ-569 · SWIPE/ROW
Swipe Row
A list row with its actions parked underneath. Dragging moves the row 1:1 with the pointer until it passes the open stop, then resists; crossing the overswipe threshold arms the first action, which grows on flick, and releasing runs it. Release settles on snap. The pointer is claimed only after 4px of horizontal travel and stands down when the travel is vertical, and every action is also in the row's menu, where Arrow keys move, Home and End jump and Escape returns focus.
KQ-569 · SWIPE/ROW
- Fieldline depot09:12
Sweep sheet for run 118
- Rosa Amberlink08:40
Clamp torque on the north bench
- BasinworksTue
Crate 12 signed for at the gate
Last none
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/swipe-row
Props
- leading / trailing
- { id: string; label: string; icon: string; tone?: "neutral" | "danger"; onSelect: () => void }[]
- default —
- Actions on each side. Leading is revealed by dragging right, trailing by dragging left; the first of a side is what an overswipe runs.
- threshold
- number
- default 0.6
- Fraction of the row's width that arms the first action.
- children
- React.ReactNode
- default —
- Row content. It rides the drag; the menu button sits beside it.
- menuLabel
- string
- default "Row actions"
- Names the menu button that carries the same actions to the keyboard.
| Prop | Type | Default | Description |
|---|---|---|---|
| leading / trailing | { id: string; label: string; icon: string; tone?: "neutral" | "danger"; onSelect: () => void }[] | — | Actions on each side. Leading is revealed by dragging right, trailing by dragging left; the first of a side is what an overswipe runs. |
| threshold | number | 0.6 | Fraction of the row's width that arms the first action. |
| children | React.ReactNode | — | Row content. It rides the drag; the menu button sits beside it. |
| menuLabel | string | "Row actions" | Names the menu button that carries the same actions to the keyboard. |