Swipe Actions
List rows you drag sideways to reveal Archive and Delete; a long swipe commits, a short one snaps back.
swipe-actions.tsxswipe-actions.css
Checking access…
Overview
Drag a row left and the actions slide out from under it. Past the halfway point the leading action grows to take the whole row, and letting go commits it; anything shorter snaps open or closed.
The row collapses away when an action fires, and the actions are also real buttons reachable by keyboard, so nothing depends on dragging.
When to use
- Inbox-style lists on touch screens.
- Lists where a frequent action should be one gesture away.
When not to use
- Desktop-only tables: use row menus.
- Actions that cannot be undone without a confirm.
Installation
$
pnpm dlx shadcn@latest add https://sundaeui.dev/r/swipe-actions.json$
npx shadcn@latest add https://sundaeui.dev/r/swipe-actions.json$
yarn dlx shadcn@latest add https://sundaeui.dev/r/swipe-actions.json$
bunx --bun shadcn@latest add https://sundaeui.dev/r/swipe-actions.jsonWorks in any React project. Files are written to components/sundae/. Read the source in the stage’s Code view. Pro assets need a personal token. See authenticated installs.
- No dependencies beyond React 18 or later.
- Copy swipe-actions.tsx and swipe-actions.css into components/sundae/.
- The CSS file is imported by the component, so no extra configuration is needed.
- Import the component and use it as shown below.
Usage
import { SwipeActions } from '@/components/sundae/swipe-actions'
<SwipeActions />Props
| Prop | Type | Default |
|---|---|---|
items*Rows. | { id: string; title: string; meta?: string }[] | — |
onActionCalled when an action fires. | (id: string, action: 'archive' | 'delete') => void | — |
fillSurface: dark or light. | 'dark' | 'light' | 'dark' |
Accessibility
- Each row exposes its actions as buttons after the row content; keyboard users never need to swipe.
- Removing a row is announced through a polite live region.
- Reduced motion removes the movement and keeps every state change.
Customization
- Colours are CSS custom properties on .sd-swa; override them in your own stylesheet.
- fill="light" switches the built-in light palette.
FAQ
- Is Swipe Actions free?
- Swipe Actions is part of Sundae Pro. The live preview is open to everyone; the source installs with a Pro account.
- How do I install Swipe Actions?
- Run npx shadcn@latest add https://sundaeui.dev/r/swipe-actions.json. The files are written to components/sundae/. It has no dependencies beyond React 18 or later.
- Does Swipe Actions support keyboard and screen readers?
- Each row exposes its actions as buttons after the row content; keyboard users never need to swipe. Removing a row is announced through a polite live region.
- Does Swipe Actions respect reduced motion?
- Reduced motion removes the movement and keeps every state change.
More like this
All components →Slide to Confirm
Components · RefinedPull to Refresh
Components · Refined- Pro
Sheet Drawer
Components · Refined Hold to Confirm
Components · Refined- Pro
Sortable List
Components · Refined Snap Carousel
Components · Refined