Card Swipe Deck

A card swipe deck component that allows horizontal swiping with visual feedback. It renders a stack of cards, with the front card draggable. Use it for interactive card-based interfaces like dating apps or product listings.

byEdu Calvo from Smoothui

Installation

terminal

pnpm dlx layro-cli add @educlopez/card-swipe-deck

npx layro-cli add @educlopez/card-swipe-deck

npx layro-cli add @educlopez/card-swipe-deck

bunx layro-cli add @educlopez/card-swipe-deck

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client";

import { cn } from "@/lib/utils";
import {
  animate,
  motion,
  type PanInfo,
  useMotionValue,
  useReducedMotion,
  useTransform,
} from "motion/react";
import {
  type KeyboardEvent,
  type ReactNode,