Swipeable Row

Pro

List row that swipes to reveal actions on either side. Pull far enough and the main action fills the row and runs when you let go; deleted rows fold away and only one row stays open.

Preview

Installation

npx @lumioui/cli add pro/swipeable-row

Usage

import { SwipeableRowGroup, SwipeableRowStrike, SwipeableRow } from "@/components/ui/swipeable-row/swipeable-row";
<SwipeableRow />

Also exported: SwipeableRowGroup, SwipeableRowStrike.

Examples

Inbox

A studio's shared inbox.

Saved items

A clothing store's "Saved" list.

API reference

SwipeableRow

Prop Type Default
leftActions SwipeableAction[]

Actions revealed when swiping right (shown on the left edge). The first one sits at the outer edge and is the full-swipe action.

 []
rightActions SwipeableAction[]

Actions revealed when swiping left (shown on the right edge). The last one sits at the outer edge and is the full-swipe action.

 []
actionWidth number

Width per action when the row rests open, in pt. Default 80.

 80
fullSwipe boolean | SwipeableRowSide

Full swipe: dragging past ~58% of the row fills it with the outer action's colour (with a haptic exactly at the line, and a softer one if you pull back under it); letting go there commits that action. true for both sides, a side name for one, false to turn it off. Default (not passed): on for a side only when its outer action is safe to fire without a confirmation, i.e. it is not destructive and has no exit: "fold". A destructive outer action never full-swipes unless you opt in with true or that side's name, so an accidental long swipe can't cancel, delete or sign out.

 —
onOpenChange (side: SwipeableRowSide | null) => void

Called when the row opens to a side or closes (null).

 —
accessibilityLabel string

Give the row a screen-reader name to make the whole row one accessible element that carries every swipe action in its actions rotor. Without it the row stays a plain container and its children keep their own accessibility (the actions are still attached to the container).

 —
children React.ReactNode —
className string —
style StyleProp<ViewStyle> —

SwipeableRowGroup

Prop Type Default
className string —