Components
Elastic Stack
A fanned deck where only the top card is draggable: pull it sideways against elastic constraints — release beyond `threshold` and it flings off with your velocity, then glides back in at the rear while the rest shuffle one step forward; release short of it and it snaps home.
Snap
Fast settle, no wobble.
Install
Copies the component source — plus its small internal deps — into your project. You own the code from the first minute.
npx lumora-ui@latest add elastic-stackImport
Using the workspace package instead? Deep imports keep cold starts lean; the barrel is fully tree-shakable either way.
import { ElasticStack } from "@lumora/ui/components/elastic-stack";
// or from the barrel:
import { ElasticStack } from "@lumora/ui";Props worth knowing
Children are the cards, front to back, each filling the container — give the stack an explicit size via className. threshold is the drag distance plus flick momentum needed to fling the top card (default 100); onTopChange reports the original index that lands on top. Arrow keys cycle the deck and the dots jump straight to a card. Props extend the natural HTML element, so className, event handlers, and aria attributes pass straight through.