composable · mobile gestures

useTuxSwipe

Pointer / touch swipe detection on a target element. Captured from the Android UI Kit absorption (swipe-to-dismiss list rows, nav drawer swipe-from-edge). Pure pointer events — works on Tauri Mobile, Tauri Desktop, and plain web.

Accessibility rule: every swipe action MUST have a visible alternative (button, link, or keyboard shortcut). Swipe-only is a screen-reader and keyboard trap. Don't ship swipe-only — the showcase below pairs swipe-left with a "Reset" button for keyboard parity.

usage

Bind to a ref

Call the composable with a template ref + a configuration object. Directional callbacks fire on pointer-up when the gesture crosses the threshold and matches the configured axis.

(See live demos below)

<script setup>
const card = ref<HTMLElement | null>(null);
useTuxSwipe(card, {
  direction: "horizontal",
  threshold: 48,
  onSwipeLeft:  () => dismiss(),
  onSwipeRight: () => reveal(),
});
</script>

<template>
  <div ref="card">…content…</div>
</template>

horizontal · row dismiss

Swipe-to-dismiss list row

Swipe the card left to dismiss; swipe right to "reveal actions". Use a mouse, trackpad, or touch — pointer events handle all three. The "Reset" button is the **a11y-pair** alternative.

Research run · landscape-2026-q2

Swipe left to dismiss, right to reveal actions

Last gesture: (none yet)

vertical · expand / collapse

Swipe-up / swipe-down

Use vertical swipes for "expand to full sheet" / "collapse back to peek" interactions on bottom sheets. Direction lock to "vertical" ignores diagonal motions.

Swipe up or down on this card

Last gesture: (none yet)