Stack List

A vertical card stack with motion-first entrance/exit, optional auto-injection, swipe-to-dismiss, and configurable hover/click effects. Honors reduced motion.

Deploy passedjust now
lazy-ui · main · #4821
PR ready for reviewjust now
Refactor stack-list animation
Daily report sentjust now
3 collaborators
Build cachedjust now
Edge runtime · 312 ms
Release v0.4.2just now
Tagged on main

Customize

Animation

Enter from

Hover effect

Click effect

Duration0.65s

Auto-insert delay2200ms

Max items5

Gap12px

Stack depth3

Stack mode

Pause on hover

Swipe to dismiss

Usage

import { StackList } from "@/components/lazy-ui/stack-list";

const items = [
  { id: 1, content: "New deploy passed checks." },
  { id: 2, content: "PR #482 ready for review." },
  { id: 3, content: "Daily report sent." },
];

export function Demo() {
  return (
    <StackList
      items={items}
      animation="blur"
      enterFrom="top"
      hoverEffect="lift"
      clickEffect="ripple"
      duration={0.65}
      autoInsertDelay={2200}
      maxItems={5}
      gap={12}
      stackDepth={3}
      stack={false}
      pauseOnHover={true}
      dismissOnSwipe={true}
    />
  );
}