proNew163 lines · framer-motion

Card Stack Swipe

Triage a stack one decision at a time. A Tinder-style stack of cards you can drag left or right to clear, with the same action also reachable through two plain buttons for anyone not using a mouse.

Use it for: A queue of pending items an agent is handing back to a human — approvals, leads, support tickets — where working through them one at a time feels faster than a table.
Themes: Light + dark
License: Commercial use

Live

Triage

Clear the stack one card at a time

Inbox

Refund request · order #4821

Customer asks for a refund after a late delivery. Policy allows it within 30 days.

drag, or use the buttons below

4 queued

tsx

"use client";

import * as React from "react";
import { AnimatePresence, animate as animateValue, motion, useMotionValue, useReducedMotion, useTransform } from "framer-motion";
import { cn } from "@/lib/utils";

function useReducedMotionSafe() {
  const prefersReduced = useReducedMotion();
  const [mounted, setMounted] = React.useState(false);
  React.useEffect(() => setMounted(true), []);
  return mounted ? !!prefersReduced : false;
}

export interface SwipeCardItem {
  tag: string;
  title: string;
  body: string;
}

export interface CardStackSwipeProps {
  eyebrow?: string;
  title?: string;

The rest is in Pro.

Full source, the rebuild prompt and registry install unlock with Pro or Lifetime.

Get Pro

How it behaves

→The top card is draggable on the X axis; dragging past a distance threshold flings it off and cycles it to the back of the stack, otherwise it springs back to centre.
→The next two cards peek out behind the top one with a slight scale and vertical offset so the stack reads as a real deck.
→Two buttons below the stack trigger the same 'skip' and 'keep' actions as a left/right drag, so the component is fully usable without touch or a mouse drag.
→Dragging is disabled under prefers-reduced-motion; the buttons remain the way to move through the stack.

Accessibility

✓The stack sits in a `role="group"` with a label; the skip/keep buttons carry explicit `aria-label`s describing the action, not just an icon.
✓A live region announces how many cards remain queued after each action.
✓Honours prefers-reduced-motion.