Stacking Cards
betaCards that stack at the top of the screen as the page scrolls, each sliding up over the last while covered ones ease back.
- Effects & motion
- 1 file
- No extra npm packages
- Accessibility notes
Loading the example…
pnpm dlx @dowel-ui/cli add stacking-cardsNo npm packages are needed beyond what Dowel already requires.
import { StackingCards } from "@/components/ui/stacking-cards";<StackingCards>
| Prop | Type | Default |
|---|---|---|
gapHow much lower each card sticks than the one before, in pixels. Default 16. | number | 16 |
offsetDistance from the top of the viewport where the first card sticks, in pixels. Default 80. | number | 80 |
shrinkHow much a card shrinks per card covering it, 0–0.2. Default 0.04. | number | 0.04 |
Plus every attribute of <div>.
<StackingCard>
Plus every attribute of <div>.
The stacking is position: sticky, so it works with JavaScript off and the page scrolls exactly as it would without it. Every card stays in the document in order, so reading and tabbing go through them as written, and each card has a scroll margin equal to where it sticks, so focusing content in a card brings it clear of the cards stacked above. The easing back is decoration: one transform per card, skipped under reduced motion.
7/7
checks passed
- Tested — passes
- axe assertion — passes
- Keyboard tested — does not apply
- Storybook examples — passes
- Accessibility documented — passes
- Semantic tokens only — passes
- Motion from tokens — does not apply
- className merged — passes
- Visible focus — does not apply
- No fixed widths — passes