---
title: "Tinder Swiper — Framer component · Best of Framer"
description: "$14.00 · Framer component · by Aidan Looker · Buttons. What is Tinder Swiper?"
canonical: "https://framer.elliotli.dev/component/tinder-swiper"
---

[Home](/)/[Components](/components)/[Buttons](/components/category/buttons)/Tinder Swiper

# Tinder Swiper

Swipeable cards with Tinder-style UX

[View on Framer](https://framer.com/marketplace/components/tinder-swiper/?via=elliot-li)

![Tinder Swiper preview image 1](https://framer.elliotli.dev/og/component/tinder-swiper/c2ec6d093243b318/1600x1200.jpg)

## Summary

What is Tinder Swiper?

## Description

## What is Tinder Swiper?

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.

[![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-8vjwbcr2-RQLDut7AgLOovQEwgaJNpNG4n3n3B6)](https://teampixelau.lemonsqueezy.com/checkout/buy/3b016e8d-2ba4-4944-8431-e2c592334df1)

## Core Features

-   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
    

## Controls inside Framer

### Content

-   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
    

### Buttons

-   Global action buttons toggle
    
-   Per-button visibility (Default, On, Off) for Undo, Nope, Super Like, Like, and Message
    
-   Show Badges toggle
    
-   Allow Overflow toggle
    

### Empty State

-   Emoji, Heading, Subtitle, and CTA Text overrides (leave blank for preset defaults)
    
-   Empty Heading Font
    
-   Empty Body Font (subtitle and CTA)
    

### Card Typography

-   Heading Font for name and age
    
-   Body Font for subtitle and secondary text
    
-   Description Font for bio text
    

### Icon Colors

-   Gradient or Custom mode toggle
    
-   Custom Icon Colors group with individual pickers for Like, Nope, Super Like, Undo, and Message buttons
    

### Colors

-   Background, Text, Text Alt, and Description text colors
    
-   Like Stamp, Nope Stamp, and Super Like Stamp colors
    
-   CTA Button color for the empty state
    

### Card Style

-   Border Radius
    
-   Shadow Intensity
    
-   Overlay Opacity
    

### Animation

-   Swipe Threshold distance
    
-   Tilt rotation range
    
-   Stack Gap offset
    
-   Stack Shrink scale
    

## Best use cases

-   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.

## Questions or custom requests?

-   We design and build custom Framer components. Get in touch at [contact@teampixel.com.au](mailto:contact@teampixel.com.au).
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #10239

## Details

- **Author**: Aidan Looker
- **Price**: $14.00
- **Published**: 2026-02-18
- **Updated**: 2026-06-13
- **Added**: 2026-02-13
- **Categories**: Buttons

## More like this

-   [Eye Glow Button](/component/eye-glow-button) — Frame Native · Free — Cursor-following eyes, soft glow
-   [Dash Stretch Button](/component/dash-stretch-button) — Pentaclay · Free — Animated Hover Button With a Dash
-   [Nova Theme Toggle](/component/nova-theme-toggle) — Shouvik Biswas · $12 — Three-Mode Theme Toggle
-   [Nabby: Copy Button](/component/nabby-copy-button) — Francesco Gallo · Free — Plug in your button, copy anything