Day 1 · Tórshavn
Harbour lanes at first light
Coffee on Vágsbotn while the fleet heads out, then the turf-roofed lanes of Reyn before the tour groups land at ten.
Card Stack
A free draggable card component with an accessible ordered deck.
Day 2 · Vestmanna
Sea cliffs from an open boat
Two hours under the bird cliffs and into the grottoes. The skipper calls it off by 09:00 if the swell builds, so keep the morning loose.
Day 3 · Saksun
A lagoon that empties twice a day
Walk the sand floor out to the black beach at low water. Today's window is 12:40 to 15:10, and the farm gate asks 75 krónur.
Day 4 · Mykines
Puffins on the western cape
The 10:20 ferry is the one that waits for weather. Walk out to the lighthouse before noon and the colony has the light behind you.
Card 1 of 4
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.
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-foreground">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-foreground">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.