Stack

PreviousNext

Layered stack with swipe animations, autoplay and smooth transitions.

Docs
react-bitscomponent

Preview

Loading preview…
Stack/Stack.css
.stack-container {
  position: relative;
  width: 100%;
  height: 100%;
  perspective: 600px;
}

.card-rotate {
  position: absolute;
  width: 100%;
  height: 100%;
  cursor: grab;
}

.card-rotate-disabled {
  position: absolute;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.card {
  border-radius: 1rem;
  overflow: hidden;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card img {
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

Installation

npx shadcn@latest add @react-bits/Stack-JS-CSS

Usage

import { StackJSCSS } from "@/components/Stack-JS-CSS"
<StackJSCSS />