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
Unlock advanced capabilities with the Pro version
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.
Swipeable Card
Drag right for a green LIKE badge, left for a red NOPE badge.
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.
Premium Content
Swipe right to like, left to pass
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.
Mike Chen
32 years old
Emma Davis
26 years old
Sarah Johnson
28 years old
Love hiking and coffee
Notification Cards
Swipeable notifications with a smaller threshold (80px) for quick dismissal in either direction.
New comment
John replied to your post
Bookmark saved
Your article was bookmarked
System update
New features available
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.
Custom Threshold
Swipe 100px to trigger — indicators fade in over that distance