Blocks
Stacking cards block
Feature cards that stack as you scroll: each sticks a little lower than the last, and as the next slides over it the card underneath settles back, smaller and dimmer, so the pile reads as depth.
pnpm dlx shadcn@latest add @caliper/stacking-cards-blockHow it works
From bank feed to closed books
Four steps, each one a screen you already have.
01
Connect your accounts
Bank feeds, cards and payment processors arrive every morning, already sorted by entity.
02
Match in bulk
Rules and suggestions match thousands of lines; you review the few that need a person.
03
Approve with context
Every large payment carries its invoice, its history and who asked for it.
04
Close and explain
Lock the period and send a written summary of what changed and why.
When to use
Use it for
- Three to five big features or steps on a landing page.
- A sequence that should feel like it builds.
Skip it when
- More than five cards; the stack becomes a long wait.
- Content people compare; use a grid.
Decisions
Why it is built this way, so you know what to keep when you change your copy.
Behaviour
- Sticky does the stacking
- Plain sticky positioning stacks the cards; script only tells each card how far it has been covered. Without script the stack still works.
- Settles, never hides
- A covered card shrinks by 5% at most and dims slightly; its top edge stays visible, so the pile can be counted.
Installation
pnpm dlx shadcn@latest add @caliper/stacking-cards-block
Adds its 6 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.
Usage
Import it from your copy of the source. The example behind the preview comes with the source.
import { StackingCardsBlock } from "@/components/ui/stacking-cards-block"
The worked example comes with Pro
The 20-line example behind the preview opens here, ready to copy.
- 576 Pro parts, blocks and page templates, all with source
- $199 once, with a year of updates. What you have stays yours
- A full refund within 14 days if it is not for you
API reference
StackingCardsBlock
component
Accessibility
It is built on native elements, so roles and focus come from the browser.
No custom key handling; Tab and the native activation keys do the work.
Motion
Transitions use the shared duration and easing tokens. Under prefers-reduced-motion those tokens collapse to instant and travel distances go to zero, so state changes still happen without movement.