Swipe Actions
Prov1.0.0List rows you swipe to snooze or complete, with keyboard actions for every swipe.
Build for your project
Code/install build
Usage
Import it and pass your content. The props that matter most are listed next.
Example
"use client";
import * as React from "react";
import { SwipeActions, type SwipeItem } from "@/components/ui/notchset/swipe-actions";
export function AlertInbox() {
const [mail, setMail] = React.useState<SwipeItem[]>([
{ id: "1", from: "Relay alerts", initials: "RA", time: "09:12", subject: "Planner p95 over 400ms", snippet: "3 spikes in the last hour", unread: true },
{ id: "2", from: "Maya Kerr", initials: "MK", time: "08:40", subject: "Canary at 5%", snippet: "Looks healthy so far" },
]);
return <SwipeActions items={mail} label="INBOX" caption="ops@relay.dev" onAction={(_id, item) => setMail((m) => m.filter((x) => x.id !== item.id))} />;
}Props
items–{ id, from, initials, org?, time?, subject, snippet?, unread? }[]The rows.
actions–{ id, label, key?, icon?, tone?, resolved? }[]The tray. Defaults to the designed Later (L) and Done (D).
onAction–(actionId, item) => voidCalled when a row resolves.
fullSwipe / threshold / trayWidth–string / number / numberThe long-swipe action (done), the release distance that keeps the tray open (60) and its width (168).
label / caption / counter–ReactNode / ReactNode / (unread, open) => ReactNodeThe header.
Anatomy
- No primitive needed: one file serves both builds.
- Pointer events with capture: mouse, pen and touch alike.
- The designed Later and Done are the defaults; pass your own actions.
SwipeActionsdata-slot="swipe-actions"The list and header.
rowdata-slot="swipe-actions-item"One row.
traydata-slot="swipe-actions-tray"The actions behind it.
Source
components/ui/notchset/swipe-actions.tsx
This component is included with Pro.
Try the live preview above. Get Pro to install the source.
Build for your project
Code/install build
Installation
pnpm dlx shadcn@latest add @notchset-pro/swipe-actionsNeeds 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.
Styles didn't apply?
The CLI adds the styles to the CSS file named in components.json (tailwind.css). Check that it points at your global stylesheet, that the project uses Tailwind CSS v4, and that the file is imported in your root layout. Installed by hand: paste styles.css into that file.
For coding agents
Give your coding assistant the Markdown guide instead of screenshots.
Use it for
- Triage lists people clear one row at a time: inboxes, alerts, review queues
Use something else when
- Destructive actions without undo
- Lists where rows need several actions: use a Dropdown Menu per row
Mistakes to avoid
- Give every action a key, so keyboard users get the same choices
Agents find it by
- swipe actions, swipe to archive, inbox, triage list, snooze, mark done, gesture list, Notchset
Where agents read it
- Guide for this component: https://notchset.dev/md/swipe-actions.md
- Every component, for tools without MCP: /llms.txt
- MCP server:
https://notchset.dev/api/mcp(setup)
Behaviour
Keyboard
- ←
- Open the tray
- → / Esc
- Close it
- L / D
- Later / Done
Accessibility
- Rows are focusable list items that name the sender and subject
- ← opens the tray, → or Esc closes it, L and D run the actions; the tray's buttons are for the pointer
- Vertical scrolling keeps working while dragging (touch-action: pan-y)
Motion
- Drag
- 1:1, damped to 25% past the tray; Done arms in signal past 170px
- Release
- Snaps open, shut or through (420ms, settle)
- Resolve
- The unread dot shrinks (260ms); after 900ms the row collapses (320ms)
Responsive
- Rows fill their container; the tray stays 168px. Vertical scrolling keeps working while dragging (touch-action: pan-y).
Performance
- Dragging updates one row's transform from pointer events; nothing else re-renders.
- Resolved rows collapse with a CSS height transition and leave the DOM's flow.
Changelog
v1.0.0 · 2026-10-02
First release
Part of
Included with Pro
Pro is in early access.
