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>

Changelog

24-02-2026 — Mobile responsiveness upgrade

Added automatic dynamic height adjustment for mobile cards.
Refined responsive card width handling.

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).