Skip to main content
components

SwipeableList

A window-virtualized list that reveals contextual actions by swiping rows on touch and pointer devices.

Package@g4rcez/componentsSectionDisplay Components

Examples

Swipe actions

Swipe right to reveal actions on the left, or swipe left to reveal actions on the right. Rows are virtualized with react-virtuoso, and revealed actions remain keyboard accessible.

    Swipe a row to reveal its actions.

    tsx
    "use client";
import { useState } from "react";
import { ArchiveIcon, CheckIcon, CheckCircleIcon, TrashIcon } from "@phosphor-icons/react";
import { SwipeableList, type SwipeableListItem } from "@g4rcez/components";

const items: SwipeableListItem[] = [
  {
    id: "pull-request",
    leading: <CheckCircleIcon size={24} aria-hidden />,
    title: "Review pull request",
    description: "Update the component docs before lunch",
    meta: "Today",
    leftActions: [
      {
        id: "complete",
        label: "Complete",
        icon: <CheckIcon size={20} aria-hidden />,
        tone: "success",
      },
    ],
    rightActions: [
      {
        id: "archive",
        label: "Archive",
        icon: <ArchiveIcon size={20} aria-hidden />,
      },
      {
        id: "delete",
        label: "Delete",
        icon: <TrashIcon size={20} aria-hidden />,
        tone: "danger",
      },
    ],
  },
];

export function InboxList() {
  const [lastAction, setLastAction] = useState("Swipe a row to reveal its actions.");

  return (
    <div className="space-y-4">
      <SwipeableList
        className="gap-4"
        items={items}
        onAction={({ action, side }) => {
          setLastAction(`${action.id} action selected from the ${side} side.`);
        }}
      />
      <p aria-live="polite" className="text-sm text-muted-foreground">
        {lastAction}
      </p>
    </div>
  );
}

    When to use SwipeableList

    Use when

    You need the documented SwipeableList interaction or presentation in a product workflow.

    Avoid when

    A native HTML element already provides the SwipeableList behavior you need.

    Accessibility

    Keep the SwipeableList labeled and use its documented keyboard interaction. The component preserves visible focus and communicates state without relying on color alone.

    • Keep keyboard focus visible and follow the documented key commands.
    • Provide an accessible name and connect descriptions or errors to the control.