Swipe Actions

Features

Built on top of React Swipe Actions.

• Drag with pointer or touch.
• Snaps open on distance or a flick. A full swipe runs the outermost action.
• Only one row open at a time, dismissed by an outside click.

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.

Accessibility

• Arrow keys open a focused row, and Escape closes it.
• Closed strips are inert, so their actions stay out of reach.
• Respects prefers-reduced-motion.

References

• Swipe Actions API reference

License and usage

• Free to use and modify in both personal and commercial projects.
• Attribution is appreciated but not required.
• Released under the MIT License.