Swipe to Delete

Overview

A swipeable list item that reveals an iOS-style delete action on drag.

This action component is intended for interfaces that need a swipeable list item that reveals an iOS-style delete action on drag, SaaS workflows, and onboarding flows. Its implementation is provided as editable source so the final behavior and styling stay inside your project.

Technologies

React
TypeScript
Tailwind CSS
Motion

Detected package dependencies: framer-motion, lucide-react.

@spectrumui/swipe-to-delete
ACAva Chen9:41 AMDesign review notes — the new empty states look great
MRMarcus Reid8:17 AMRe: Q3 roadmap — can we move the sync to Thursday?
PNPriya NairYesterdayYour invoice for June is ready to download

Drag a row left to delete — or hover for the button

Installation

Login to view commandCreate a free account to access the install command

Usage

import { SwipeToDelete } from "@/components/spectrumui/swipe-to-delete"
<SwipeToDelete label="email from Ava" onDelete={() => removeEmail(id)}>
  <EmailRow />
</SwipeToDelete>

API Reference

SwipeToDelete

Wraps its children as the draggable row of a role="group" wrapper named by label. Pressing Delete or Backspace while the wrapper is focused deletes the row, and onDelete fires only after the collapse animation finishes — remove the item from state there.

PropTypeDefaultDescription
*onDelete() => void-Fires once the collapse animation finishes; remove the item here
*childrenReactNode-Row content rendered on the draggable surface
labelstring"item"Accessible name of the row; also used for the delete button label
actionWidthnumber96Width in pixels of the revealed delete zone
thresholdnumber0.6Fraction of actionWidth the drag must pass to commit the delete
showButtonOnHoverbooleantrueShow a fallback delete button on row hover/focus for non-touch users
disabledbooleanfalseDisables dragging, the delete button and keyboard deletion
classNamestring-Additional classes merged with the default wrapper styles

Examples

Custom action width and threshold

Ship onboarding flowToday
Review pull requestsToday
Update changelogTomorrow

A wider action zone (120px) that commits at 40% of the swipe

Use cases

  • interfaces that need a swipeable list item that reveals an iOS-style delete action on drag
  • SaaS workflows
  • onboarding flows

Features

  • Copy-paste source that remains in your repository
  • TypeScript source included with the component
  • Tailwind CSS classes editable in the component source
  • Animation implemented with Motion
  • Reduced-motion handling present in the source

Accessibility

  • The source includes ARIA attributes or roles; preserve them when customizing the component.
  • The source includes keyboard event handling; verify it alongside pointer behavior.
  • The source checks reduced-motion preferences or includes motion-reduce styles.
  • Test focus order, keyboard operation, labels, contrast, and screen-reader output in the final application context.

Customization

  • Edit the Tailwind utility classes in the copied source to match your spacing, color, and typography tokens.
  • Use the documented className surface for local layout adjustments, then edit the source for structural changes.
  • Adjust Motion transitions in the source and keep the reduced-motion behavior aligned with the final interaction.

Related components

Button
A set of pre-designed buttons including gradient, outline, loading, and icon styles.
Follow Button
A follow button that morphs its width, fill, and label between states.
Hold to Confirm
A press-and-hold button that fills a progress ring before confirming destructive actions.
Like Button
A heart button that pops with a particle burst and rolling count.

Topic guides

See how this component fits into broader interface patterns, implementation decisions, and working examples.

Motion Components

Swipe to Delete FAQ

Is Swipe to Delete free to use in commercial projects?

Yes. The public Swipe to Delete source is available under the Apache License 2.0, including for commercial use, subject to the LICENSE terms.

How do I install Swipe to Delete?

Run npx shadcn@latest add @spectrumui/swipe-to-delete. The page also exposes the source for manual installation.

Does Swipe to Delete require Motion?

Yes. Motion usage was detected in the documented source or registry dependencies for Swipe to Delete.

Does Swipe to Delete use shadcn/ui or Radix UI?

No shadcn/ui or Radix UI dependency was detected in the documented Swipe to Delete source.

Can I use Swipe to Delete in Next.js?

The documented React source is used in this Next.js application. Keep its use client directive when copying it into the App Router. Install the detected dependencies and verify any application-specific data or image configuration.

What accessibility checks should I run for Swipe to Delete?

The source includes ARIA markup, keyboard handlers, reduced-motion handling. Test the finished interface with keyboard and screen-reader workflows.