Swipe Action Row

Use Swipe Action Row to reveal contextual actions on either side of a list item. It coordinates sibling rows, supports pointer, touch, and keyboard input, and lets a safe action take over after a decisive full swipe.

Preview

Reduce motion:Off

Inspect

Installation

Motion

npx shadcn@latest add @sona-ui/swipe-action-row

Basic usage

inbox-row.tsx

import SwipeActionRow from "@/components/ui/swipe-action-row/swipe-action-row";
 
export function Inbox() {
return (
  <SwipeActionRow.Root render={<ul />}>
    <SwipeActionRow.Item render={<li />}>
      <SwipeActionRow.Actions side="left">
        <SwipeActionRow.Action fullSwipe onClick={() => archiveMessage()}>
          Archive
        </SwipeActionRow.Action>
      </SwipeActionRow.Actions>
 
      <SwipeActionRow.Actions side="right">
        <SwipeActionRow.Action onClick={() => flagMessage()}>
          Flag
        </SwipeActionRow.Action>
        <SwipeActionRow.Action variant="destructive" onClick={() => deleteMessage()}>
          Delete
        </SwipeActionRow.Action>
      </SwipeActionRow.Actions>
 
      <SwipeActionRow.Content>Message content</SwipeActionRow.Content>
    </SwipeActionRow.Item>
  </SwipeActionRow.Root>
);
}

Examples

Swipe right to reveal the left actions or left to reveal the right actions. A focused row also responds to the left and right arrow keys. Put fullSwipe on one safe action per side when a decisive gesture should run it immediately.

Usage


"use client";
 
import { Archive, Flag, RotateCcw, Trash2 } from "lucide-react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
import { useState } from "react";
 
import SwipeActionRow from "@/components/ui/swipe-action-row/swipe-action-row";
 
const initialMessages = [
  {
    id: 1,
    sender: "Maya Chen",
    subject: "Reviewing the motion pass",
    preview: "The settling behavior feels much closer to the native pattern.",
    flagged: false,
  },
  {
    id: 2,
    sender: "Noah Williams",
    subject: "Updated project timeline",
    preview: "I moved the interaction review to Friday afternoon.",
    flagged: false,
  },
  {
    id: 3,
    sender: "Ava Patel",
    subject: "Notes from yesterday",
    preview: "Keyboard and touch behavior are ready for another pass.",
    flagged: true,
  },
];
 
export default function SwipeActionRowDemo() {
  const [messages, setMessages] = useState(initialMessages);
  const shouldReduceMotion = useReducedMotion();
 
  const removeMessage = (id: number) =>
    setMessages((current) => current.filter((message) => message.id !== id));
 
  const toggleFlag = (id: number) =>
    setMessages((current) =>
      current.map((message) =>
        message.id === id ? { ...message, flagged: !message.flagged } : message,
      ),
    );
 
  return (
    <div className="w-full max-w-md overflow-clip rounded-2xl border border-border bg-background">
      <SwipeActionRow.Root render={<ul className="divide-y divide-border" />}>
        <AnimatePresence initial={false}>
          {messages.map((message) => (
            <SwipeActionRow.Item
              key={message.id}
              closeOnScroll
              render={
                <motion.li
                  layout={!shouldReduceMotion}
                  exit={{ opacity: 0 }}
                  transition={
                    shouldReduceMotion
                      ? { duration: 0 }
                      : { duration: 0.18, ease: [0.32, 0.72, 0, 1] }
                  }
                />
              }
            >
              <SwipeActionRow.Actions side="left">
                <SwipeActionRow.Action
                  fullSwipe
                  className="bg-sky-600 text-white"
                  onClick={() => removeMessage(message.id)}
                >
                  <Archive />
                  Archive
                </SwipeActionRow.Action>
              </SwipeActionRow.Actions>
 
              <SwipeActionRow.Actions side="right">
                <SwipeActionRow.Action
                  fullSwipe
                  className="bg-amber-500 text-white"
                  onClick={() => toggleFlag(message.id)}
                >
                  <Flag />
                  {message.flagged ? "Unflag" : "Flag"}
                </SwipeActionRow.Action>
                <SwipeActionRow.Action
                  variant="destructive"
                  onClick={() => removeMessage(message.id)}
                >
                  <Trash2 />
                  Delete
                </SwipeActionRow.Action>
              </SwipeActionRow.Actions>
 
              <SwipeActionRow.Content>
                <button
                  type="button"
                  className="flex min-h-24 w-full flex-col items-start justify-center gap-1 px-4 text-left focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring"
                >
                  <span className="flex items-center gap-1.5 font-medium text-sm">
                    {message.sender}
                    {message.flagged && (
                      <Flag className="size-3.5 fill-amber-500 text-amber-500" />
                    )}
                  </span>
                  <span className="text-foreground text-sm">
                    {message.subject}
                  </span>
                  <span className="w-full truncate text-muted-foreground text-xs">
                    {message.preview}
                  </span>
                </button>
              </SwipeActionRow.Content>
            </SwipeActionRow.Item>
          ))}
        </AnimatePresence>
      </SwipeActionRow.Root>
 
      {messages.length === 0 && (
        <div className="flex flex-col items-center gap-3 px-4 py-8 text-center">
          <p className="text-muted-foreground text-sm">No messages left.</p>
          <button
            type="button"
            className="inline-flex items-center gap-2 rounded-lg px-3 py-2 text-sm hover:bg-muted"
            onClick={() => setMessages(initialMessages)}
          >
            <RotateCcw className="size-4" />
            Restore messages
          </button>
        </div>
      )}
    </div>
  );
}

API

Property	Type	Default	Description
`threshold`	`number`	`0.5`	Fraction of the action strip crossed before the row opens.
`velocityFactor`	`number`	`0.2`	Seconds of release velocity projected onto the resting position.
`fullSwipeThreshold`	`number`	`0.5`	Fraction of row width crossed before a full-swipe action arms.
`disabled`	`boolean`	`false`	Prevents pointer and keyboard gesture interaction.
`closeOnScroll`	`boolean`	`false`	Closes an open row when the page scrolls.
`onOpenChange`	`(state: SwipeActionRowState) => void`	`undefined`	Called when the row becomes closed, left-open, or right-open.

Accessibility

Closed action strips are inert, so their controls stay outside the tab order and accessibility tree. Focus the row content and use the left or right arrow key to expose a strip, then tab to its actions. Escape and outside click close the row. Give icon-only actions an accessible name, keep destructive actions explicit, and provide undo when removal is reversible. Reduced-motion preferences replace settling motion with immediate state changes.

Behavior

SwipeActionRow.Root coordinates sibling items so only one stays open. Each Item owns its gesture and accepts open, velocity, full-swipe, disabled, and scroll-dismissal controls. Place one Actions strip on either or both physical sides, then assign fullSwipe to the action that should take over that side. Your application continues to own action effects and list data.

The foreground tracks the pointer continuously. On release, velocity is projected into the resting decision, and the row either closes, reveals the measured strip, or arms the selected full-swipe action. Keyboard opening is immediate and does not add decorative motion.

Contact

Found a bug or need help using this component? Open an issue on GitHub.

License & Usage

Sona UI is available under the MIT license. You may use, modify, and distribute this component in personal and commercial projects.

Was this component useful?

Your feedback helps us improve the documentation.