Swipeable Stack Deck

Bring Tinder-style swiping mechanics to your web application. Using Framer Motion's drag API and advanced physics, users can physically grab the top card of a stack and throw it off the screen. As cards are removed, the cards underneath perfectly scale and slide up to take their place.

Live Preview

Swipeable Stack Deck

Default

Playground

PreviewUsageInstallation

Tokyo Neon

Japan

Alpine Lake

Switzerland

Desert Dunes

Morocco

LIKE

NOPE

Interaction:Drag the top card left or right to swipe.

Usage Guide

1. Import the Component

Import the component into your React or Next.js page:

import { SwipeableStack } from "@/components/creative/swipeable-stack";

2. Implementation Example

Render the component and customize its behavior by passing props:

import { SwipeableStack } from "@/components/creative/swipeable-stack";

export default function Example() {
  return (
    <div className="w-full flex items-center justify-center p-8">
      <SwipeableStack
        cards{/* value */}
        onSwipeRight{/* value */}
        onSwipeLeft{/* value */}
      />
    </div>
  );
}