Scroll stackPro
Cards that stick and stack as you scroll, earlier ones shrinking into the pile.
Scroll inside this box ↓
01
Install
One CLI command adds the component and its dependencies.
02
Customize
It's your code: change the tokens, props and markup freely.
03
Ship
Accessible, responsive and animated out of the box.
04
Iterate
Pull updates from the registry whenever you like.
When to use
- Feature or step stories on landing pages.
When not to use
- Content people need to compare: they overlap.
Installation
Usage
Import it from @/components/ui/scroll-stack after installing.
example.tsx
import { ScrollStack } from "@/components/ui/scroll-stack";
<ScrollStack cards={steps.map((s) => <StepCard key={s.id} step={s} />)} top={80} cardHeight={360} />API reference
ScrollStack
Sticky cards that stack; earlier cards scale down and darken.
| Prop | Type | Default | Description |
|---|---|---|---|
| cards | ReactNode[] | – | Card contents. |
| container | RefObject<HTMLElement> | – | Scrollable element; omit for the page. |
| top / cardHeight | number | 24 / 320 | Sticky offset and card height. |
Accessibility
- Cards are normal content in reading order; nothing is hidden from assistive tech.
Motion
- Scale and dimming are tied to scroll position, so they follow your scroll exactly.
Responsive behavior
- Works at any width; keep cardHeight under the viewport height.
Performance
- Transforms driven by one scroll motion value.
Notes for AI
- Add space after the stack so the last card can settle.
This page as Markdown, for assistants and coding agents:
/components/scroll-stack/markdownThe full library index for assistants is at /llms.txt.
Lode222 doc pagesllms.txt