Swipe Actions

Swipe a list row left or right to reveal configurable actions.

@lucide/sveltemotion-svruned

Installation

pnpm dlx shadcn-svelte@latest add http://sveltekit-prerender/r/swipe-actions.json

Reveal a destructive action by swiping a list row to the left.

Coordinates a group so only one swipe item remains open.

Name	Type	Default	Description
`children`	`Snippet`	`required`	`Swipe items rendered inside the root.`
`ref`	`HTMLDivElement \| null`	`null`	`Bindable reference to the root element.`
`class`	`ClassValue`	`undefined`	`Additional classes applied to the root element.`

A swipeable row that owns gesture state and snap behavior.

Name	Type	Default	Description
`children`	`Snippet`	`required`	`Action strips and foreground content rendered inside the item.`
`threshold`	`number`	`0.5`	`Fraction of an action strip the drag must pass to snap open.`
`velocityFactor`	`number`	`0.2`	`Seconds of pointer velocity projected onto the release position.`
`fullSwipeThreshold`	`number`	`0.5`	`Fraction of the row width required to arm a full-swipe action.`
`disabled`	`boolean`	`false`	`Disables pointer and keyboard swiping.`
`closeOnScroll`	`boolean`	`false`	`Closes an open item when the page scrolls.`
`onOpenChange`	`(state: SwipeState) => void`	`undefined`	`Called when the item settles closed, left, or right.`
`ref`	`HTMLDivElement \| null`	`null`	`Bindable reference to the item element.`
`class`	`ClassValue`	`undefined`	`Additional classes applied to the item.`

Action strip revealed on one side of a swipe item.

Name	Type	Default	Description
`children`	`Snippet`	`required`	`Actions rendered in DOM order inside the strip.`
`side`	`"left" \| "right"`	`required`	`Side of the row from which actions are revealed.`
`fullSwipe`	`boolean`	`false`	`Lets a drag across the row invoke the outermost action.`
`ref`	`HTMLDivElement \| null`	`null`	`Bindable reference to the action strip.`
`class`	`ClassValue`	`undefined`	`Additional classes applied to the action strip.`

Styled action button displayed inside an action strip.

Name	Type	Default	Description
`children`	`Snippet`	`required`	`Icon and label rendered inside the action.`
`closeOnClick`	`boolean`	`true`	`Closes the item after the click handler runs without being prevented.`
`onclick`	`(event: MouseEvent) => void`	`undefined`	`Runs when the action is clicked or invoked by a full swipe.`
`ref`	`HTMLButtonElement \| null`	`null`	`Bindable reference to the action button.`
`class`	`ClassValue`	`undefined`	`Additional classes applied to the action button.`

Draggable foreground content that reveals the action strips.

Name	Type	Default	Description
`children`	`Snippet`	`required`	`Visible row content moved by the swipe gesture.`
`style`	`MotionStyleProps`	`undefined`	`Additional Motion styles merged with the horizontal motion value.`
`ref`	`HTMLDivElement \| null`	`null`	`Bindable reference to the draggable content.`
`class`	`ClassValue`	`undefined`	`Additional classes applied to the content.`