Tinder Swiper is a production-ready swipe card component that replicates the famous left, right, and up swipe interaction. Each card supports multiple photos with tap-to-browse, text overlays, LIKE/NOPE/SUPER LIKE stamps, and animated action buttons with gradient press states. Use it for dating app concepts, travel destination pickers, product comparisons, food menus, pet adoption flows, or any card-based decision interface.
Five built-in presets (Tinder, Travel, Cars, Food, Pets) with curated placeholder content, fallback images, and preset-specific button layouts
Full drag-to-swipe with directional stamps, spring physics, and tilt rotation that mirrors native app interactions
Multi-photo cards with tap-left/tap-right navigation and animated indicator bars
Five action buttons (Undo, Nope, Super Like, Like, Message) with vibrant gradient press states and per-button visibility control
Gradient or Custom icon color modes for full brand control
Fully customizable empty state screen with editable emoji, heading, subtitle, CTA text, and independent font controls
Undo support that restores the previously swiped card
Preset selector (Tinder, Travel, Cars, Food, Pets)
Cards array with up to 20 items, each with 3 photo slots, name, age/year, subtitle, description, active badge, and tag
Global action buttons toggle
Per-button visibility (Default, On, Off) for Undo, Nope, Super Like, Like, and Message
Show Badges toggle
Allow Overflow toggle
Emoji, Heading, Subtitle, and CTA Text overrides (leave blank for preset defaults)
Empty Heading Font
Empty Body Font (subtitle and CTA)
Heading Font for name and age
Body Font for subtitle and secondary text
Description Font for bio text
Gradient or Custom mode toggle
Custom Icon Colors group with individual pickers for Like, Nope, Super Like, Undo, and Message buttons
Background, Text, Text Alt, and Description text colors
Like Stamp, Nope Stamp, and Super Like Stamp colors
CTA Button color for the empty state
Border Radius
Shadow Intensity
Overlay Opacity
Swipe Threshold distance
Tilt rotation range
Stack Gap offset
Stack Shrink scale
Dating app prototypes and landing pages that need authentic swipe interactions
Product showcases and comparison tools where users swipe to approve or dismiss items
Portfolio and gallery presentations with an engaging, interactive browsing experience
Restaurant menus, travel planners, and pet adoption sites with card-based discovery
Ship the most recognized mobile interaction pattern on the web, no code required.
Aidan Looker
