Swipe Actions

Features

Built on top of React Swipe Actions.

• Drag with pointer or touch, or open a focused row with the arrow keys.
• Snaps open on distance or a flick. A full swipe runs the outermost action.
• Only one row open at a time, dismissed by Escape or an outside click.
• Keeps closed strips inert and respects prefers-reduced-motion.

Installation

pnpm dlx shadcn@latest add @ncdai/swipe-actions

Usage

import {
  SwipeAction,
  SwipeActions,
  SwipeContent,
  SwipeItem,
  SwipeRoot,
} from "@/components/swipe-actions"

<SwipeRoot>
  <SwipeItem>
    <SwipeActions side="right" fullSwipe>
      <SwipeAction />
      <SwipeAction />
    </SwipeActions>
 
    <SwipeContent />
  </SwipeItem>
</SwipeRoot>

Composition

Use the following composition to build a SwipeItem

SwipeRoot
└── SwipeItem
    ├── SwipeActions
    │   └── SwipeAction
    └── SwipeContent

Examples

Minimal

The smallest setup that works: one action on one side.

Choosing the full swipe action

A full swipe runs the outermost action, so order the strip with the safe one last. Here Delete sits next to the row and still needs a deliberate tap.

References

• Swipe Actions API reference