Tinder Like Swipe

Cards 66

About

Here is Tinder Like Swipe component

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Tinder Like Swipe to your project and fits it to your theme.

Code

How Tinder Like Swipe is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

// File: App.jsx (или ваш главный файл для предпросмотра)

import * as React from "react";
// Мы импортируем ТОЛЬКО чистый компонент. Никаких зависимостей от Framer.
import { SwipeableCardStack } from "@/components/ui/tinder-like-swipe";

// Это наш Демо-Контейнер. Его единственная задача - показать компонент в действии.
export default function TinderSwipeDemo() {
    // Данные для демонстрации, которые в Framer приходят из property controls
    const demoProps = {
        images: [
            "https://cdn.21st.dev/assets/mirror/ba/baf7e1328606b1be8b7468aa5df391c9b06817f54e2e7ef00ddb1ef3c8096f20.jpg",
            "https://cdn.21st.dev/assets/mirror/8c/8c6e5dbb7f78c8188e967bd5556b7e2c4bdf5867caa9f9d7e26756041b93467a.jpg",
            "https://cdn.21st.dev/assets/mirror/0a/0aaa68a0b278e07af2b80b77c12c49c0e880a2ca2eb327dec3447c650e7a0fe9.jpg",
        ],
        rightIcon: "https://uploads-ssl.webflow.com/6226162356726c4835057a73/6232367c3761286ddff6004c_icon-like.svg",
        leftIcon: "https://uploads-ssl.webflow.com/6226162356726c4835057a73/6232367c825de783a6697a3c_icon-dislike.svg",
        borderRadius: 20,
    };

    return (
        // 1. Контейнер для центрирования и красивого фона
        <div style={{
            display: "grid",
            placeItems: "center",
            width: "100vw",
            height: "100vh",
            background: "#e0e0e0",
        }}>
            {/* 2. Обертка, задающая размер карточке */}
            <div style={{ width: "300px", height: "400px" }}>
                {/* 3. Вызываем чистый компонент с нашими демо-пропсами */}
                <SwipeableCardStack {...demoProps} />
            </div>
        </div>
    );
}