Skip to content
Pinky UI

mobile

Card Stack Browse

A small editorial card stack uses bounded drag distance to let the next card gain depth without becoming a swipe-to-dismiss clone.

  • mobile
  • cards
  • stack
  • drag
  • browse
Related pattern

The stack is for sequential browsing and keeps a next-card relationship visible, not for binary accept/reject gestures.

Live preview

Next / Material

Current / Signal

Start with the relationship that matters.

Drag to browse · Arrow keys work too

Quick usage

usage
import { CardStackBrowse } from "@pinky-ui/systems";

<CardStackBrowse items={items} />

Install

Add @pinky-ui/systems as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.

shell
npm install @pinky-ui/systems

Prefer to run the whole repository locally instead?

repository
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run dev

Accessibility

  • Every gesture has a labelled button or keyboard path, and primary controls meet a 44px touch target.
  • State remains readable without relying on colour or motion.

Performance

  • Interaction state is local and bounded; gesture updates do not require a page-wide render loop.
  • Timers and listeners are cleaned up on unmount.

Reduced motion

The same state change resolves immediately; travel, scale and spring motion are removed without removing the interaction.

When to use

  • Touch-first product surfaces where the next action should stay close to the hand.

When not to use

  • Desktop-only workflows or interactions whose gesture would hide the only available action.

Skill

Purpose

Card Stack Browse uses a small layered collection for sequential exploration. Drag distance moves the current card while the next card remains visible, so the interaction feels editorial rather than like a binary swipe decision.

Use when

  • A short collection benefits from one clear current item and a visible next item.
  • Previous and next browsing are both meaningful.

Interaction

Drag the top card past its threshold or use Previous/Next and Arrow keys. A short drag snaps back to the current card.

Accessibility

Make the active card focusable and provide labelled Previous/Next buttons. The current label and description should be announced as the index changes.

Reduced motion

Replace card travel and rotation with an immediate item swap while keeping the next-card relationship in text.

Tune

  • Keep the stack to a few items.
  • Never make the gesture the only way to move through content.
Open this skill on its own page