Modus UI

Stack

Web (React)

A 3D interactive stack of cards that can be dragged and rearranged.

An interactive deck of cards utilizing Framer Motion's useTransform and drag. Cards can be thrown to the back of the stack by dragging them off-center, or by clicking them (configurable).

Card 4
Card 3
Card 2
Card 1

Installation

CLI

npx @modus-ui/cli add stack

Manual

  1. Copy the code from the component tab.
  2. Create a file at components/ui/stack.tsx.
  3. Paste the code.

Usage

tsx
import { Stack } from "@/components/ui/stack";

export default function Example() {
  const cards = [
    <div key="1" className="h-full w-full rounded-2xl bg-blue-500">
      Card 1
    </div>,
    <div key="2" className="h-full w-full rounded-2xl bg-red-500">
      Card 2
    </div>,
  ];

  return (
    <div className="h-[400px] w-[300px]">
      <Stack cards={cards} randomRotation={true} sendToBackOnClick={true} />
    </div>
  );
}

Props

PropTypeDefaultDescription
cardsReact.ReactNode[]-The cards in the stack.
randomRotationbooleanfalseGives each card a slight random rotation.
sensitivitynumber200Drag distance in pixels that sends a card to the back.
animationConfig{ stiffness: number; damping: number }{ stiffness: 260, damping: 20 }Spring settings for card movement.
sendToBackOnClickbooleanfalseSends the top card to the back on click.
autoplaybooleanfalseCycles the cards automatically.
autoplayDelaynumber3000Milliseconds between automatic cycles.
pauseOnHoverbooleanfalsePauses autoplay while hovered.
mobileClickOnlybooleanfalseUses click instead of drag on mobile.
mobileBreakpointnumber768Width in pixels below which the device counts as mobile.

Comments

  • No comments yet.