Swipe RowProv1.0.0
A row that slides aside to show what you can do with it: drag past halfway and it stays open; keep going and a meter of cells fills, so a release runs the outer action and a row that removes itself folds away. The same actions are one press away on the row's Actions button.
pnpm dlx shadcn@latest add @beautiful-ui-pro/lumen-swipe-rowNeeds your registry key. Your components.json style picks the Base UI or Radix build: radix-*, new-york and default get Radix, base-* gets Base UI.
Full swipe runs the outer action
Usage
Import it and pass your content. The props that matter most are listed next.
Example
import { SwipeRow } from "@/components/ui/lumen/controls/swipe-row";
<SwipeRow
start={[{ id: "read", label: "Mark read", tone: "accent", onAction: () => markRead(id) }]}
end={[
{ id: "snooze", label: "Snooze", tone: "warn", onAction: () => snooze(id) },
{ id: "archive", label: "Archive", tone: "good", removes: true, onAction: () => archive(id) },
]}
>
<MessageRow message={message} />
</SwipeRow>Props
end–SwipeAction[]Revealed by swiping toward the start (right to left in LTR). The last one is the outer action a full swipe runs.
start–SwipeAction[]Revealed by swiping toward the end (left to right in LTR).
SwipeAction–{ id, label, icon?, tone?, onAction, removes? }tone: neutral, accent, good, warn or danger. removes: the row folds away, then onAction runs.
fullSwipetruebooleanA long swipe runs the outer action.
commitAt0.6numberThe share of the row's width a full swipe must pass.
actionsLabel"Actions"stringThe Actions button's accessible name (it opens the same actions without a gesture).
Show all 7 propsShow fewer
disabledfalsebooleanNo dragging; the Actions button still works.
Source
components/ui/lumen/controls/swipe-row.tsx
This component is included with Pro.
Try the live preview above. Get Pro to install the source.
