Field note 01
Atlas of quiet interfaces
A tactile deck keeps related ideas close while one clear surface carries the reading and interaction focus.
Card Stack
A free draggable card component with an accessible ordered deck.
- Automated axe check
- Reduced-motion tested
- SSR build verified
- Motion
- 1 runtime package
Card Stack is a free draggable card stack React component for Next.js, styled with Tailwind and animated with Motion springs. Drag the top card from its grip or use the visible buttons to cycle two to six keyed cards without changing the deck's reserved layout size.
Before JavaScript, every card remains readable in a scrollable static list. Hydration enhances the same keyed nodes so only the current card is exposed to assistive technology; its body scrolls vertically when content exceeds the deck, interactive content keeps its native behaviour, reduced-motion users receive instant drag-free reordering, and child changes retain every survivor's position.
Field note 02
Material studies for the web
Scale, spacing and restrained depth turn a familiar card pattern into a compact narrative with a strong sense of place.
Field note 03
A system that remembers its place
Stable card identities preserve form state while drag, buttons and focused arrow keys all cycle through the same ordered deck.
Field note 04
The archive stays within reach
Progressive enhancement keeps the complete reading sequence available before the draggable deck becomes interactive.
Card 1 of 4
Install
Add the @te registry to your components.json once:
{
"registries": {
"@te": "https://templateempire.io/r/{name}.json"
}
}Then install the component:
npx shadcn@latest add @te/card-stackUsage
import { CardStack } from "@/components/ui/card-stack";
export function Example() {
return (
<CardStack>
<article key="research" className="h-full p-8">
<h2 className="text-2xl font-semibold">Research</h2>
<p className="mt-3 text-muted">A concise project note.</p>
</article>
<article key="prototype" className="h-full p-8">
<h2 className="text-2xl font-semibold">Prototype</h2>
<p className="mt-3 text-muted">The next stage of the work.</p>
</article>
</CardStack>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | required | Two to six cards with unique stable keys; live changes retain survivors and append newcomers. |
| className | string | undefined | Additional classes merged onto the labelled stack root. |
Customisation
Card Stack intentionally exposes no Tier 3 CSS variables because its depth offsets are part of the interaction design. Use className to set the stack width, then style each keyed child with semantic Tailwind utilities:
<CardStack className="max-w-2xl">
<article key="one" className="h-full p-10">First card</article>
<article key="two" className="h-full p-10">Second card</article>
</CardStack>Frequently asked questions
- Is Card Stack free for commercial use?
- Yes. Card Stack is MIT licensed, so you can use it in personal and commercial projects without attribution.
- Is Card Stack accessible and performant?
- Yes. Buttons and group-level arrow keys provide complete keyboard navigation, hidden cards are inert and excluded from assistive technology, and a polite status message announces the current position. Motion changes transform and opacity only while the fixed deck size prevents layout shift.
- How do I customise Card Stack?
- Pass className to adjust the stack width and style the two to six keyed child cards with semantic Tailwind utilities. Keep keys stable when filtering or adding cards so surviving content and deck position are retained; the depth scale stays fixed.