Swipeable Card
Touch-friendly swipeable card component with gesture support, customizable actions, and smooth animations for mobile-first interactions and card-based interfaces.
Pro features
What the Pro version adds to this component.
Built-in LIKE / NOPE Indicators
Green LIKE and red NOPE overlays fade in automatically as you drag, driven by distance relative to the threshold.
Spring-Physics Motion
Cards rotate while dragging, animate off-screen on a completed swipe, and spring back smoothly when released early.
Touch & Pointer Support
Works with both touch and mouse drag, with grab cursors and text-selection disabled for a native feel.
Composable Card Stacks
Drops cleanly into Tinder-style stacks — control z-index and offsets from your own layout.
Flexible Layout
Wraps any content and accepts custom dimensions via className and style.
Installation
Install via CLI
npx @moontra/moonui-cli add swipeable-cardUsage
Swipeable Card
Drag right for a green LIKE badge, left for a red NOPE badge.
Examples
Built-in LIKE / NOPE Indicators
The component renders directional overlays automatically: dragging right past the threshold fades in a green LIKE badge (top-right), dragging left fades in a red NOPE badge (top-left). The card also rotates as it moves, and springs back if you release before the threshold.
Card with Action Buttons
Pair swipe gestures with focusable buttons so the same actions stay reachable without dragging. Toggling `disabled` turns the drag gesture off while those buttons keep calling the same handlers — the accessible fallback path.
Tinder-Style Card Stack
Render a stack where only the top card is swipeable; background cards are static layers positioned behind it. Note: keep transforms in your own layout — passing a transform through style would override the drag animation, so the top card only sets zIndex.
Notification Cards
Swipeable notifications with a smaller threshold (80px) for quick dismissal in either direction.
Custom Threshold and Feedback
Adjust how far the user must drag before a swipe registers. The LIKE / NOPE indicators fade in across the same distance, so a larger threshold reveals them more gradually.