Layer Stack

Interactive stacked card layout with drag and scroll momentum.

Installation

npx shadcn@latest add @scrollxui/layer-stack

Usage

import { LayerStack, Card } from "@/components/ui/layer-stack";

<LayerStack cardWidth={320} cardGap={16} stageHeight={420}>
  <Card className="bg-muted rounded-xl p-6">
    Card One
  </Card>
  <Card className="bg-muted rounded-xl p-6">
    Card Two
  </Card>
  <Card className="bg-muted rounded-xl p-6">
    Card Three
  </Card>
</LayerStack>

API Reference

Layer Stack

Interactive stacked card layout with drag and scroll momentum.

Props

Property	Type	Default	Description
`cardWidth`	number	`320`	Width of each stacked card.
`cardGap`	number	`16`	Spacing between cards.
`stageHeight`	number	`400`	Height of the stack container (auto-adjusts on mobile).
`lastCardFullWidth`	boolean	`false`	Makes last card stretch full width.
`mobileSensitivity`	number	`2`	Controls swipe sensitivity and momentum on mobile devices.
`className`	string	`-`	Wrapper styling (LayerStack & Card supported).
`children`	ReactNode	`-`	Card content (used inside Card).