Skip to content
Pinky UI

mobile

Swipe-to-Dismiss Card Sheet

A card sheet follows vertical drag with translation, scale and scrim response before snapping back or dismissing.

  • mobile
  • sheet
  • swipe
  • card
  • dismiss
Related pattern

The card itself communicates release through coordinated travel and scale, with a close button and Escape fallback.

Live preview

Quick usage

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

<SwipeDismissCardSheet open={open} onOpenChange={setOpen} title="Preview" />

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

Swipe-to-Dismiss Card Sheet is a card-like lower surface that follows a downward drag with coordinated translation, scale and scrim response. It returns to rest when the release threshold is not met.

Use when

  • A temporary preview or short task should feel attached to the lower edge.
  • Dismissal is reversible until the user crosses a clear distance.

Interaction

Drag the handle downward. A short drag snaps back; a committed drag dismisses. Close and Escape remain visible alternatives.

Accessibility

Give the dialog a name, provide a close button and keep all task actions as normal buttons. Do not make the drag handle the only dismissal control.

Reduced motion

Use an immediate open, snap or dismiss state while preserving the card's content and focus path.

Tune

  • Keep the commit threshold obvious through copy and distance.
  • Avoid hiding essential multi-step forms inside a dismissible card sheet.
Open this skill on its own page