How to Build Tinder-Style Swipe Cards in SwiftUI

import SwiftUI

// MARK: - Model

struct Profile: Identifiable {
    let id = UUID()
    let name: String
    let age: Int
    let tagline: String
    let color: Color
}

enum SwipeDirection { case left, right }

// MARK: - Card View

struct SwipeCardView: View {
    let profile: Profile
    @Binding var offset: CGSize
    @Binding var direction: SwipeDirection?

    private var rotation: Double { Double(offset.width / 18) }
    private var likeOpacity: Double { max(0, min(1, Double(offset.width) / 80)) }
    private var nopeOpacity: Double { max(0, min(1, Double(-offset.width) / 80)) }

    var body: some View {
        ZStack(alignment: .topLeading) {
            RoundedRectangle(cornerRadius: 24)
                .fill(LinearGradient(
                    colors: [profile.color.opacity(0.85), profile.color],
                    startPoint: .topLeading, endPoint: .bottomTrailing
                ))
                .shadow(color: .black.opacity(0.12), radius: 12, y: 6)

            // Profile info
            VStack(alignment: .leading, spacing: 6) {
                Spacer()
                Text("\(profile.name), \(profile.age)")
                    .font(.title.bold())
                    .foregroundStyle(.white)
                    .accessibilityAddTraits(.isHeader)
                Text(profile.tagline)
                    .font(.subheadline)
                    .foregroundStyle(.white.opacity(0.88))
            }
            .padding(22)

            // LIKE stamp
            Text("LIKE")
                .font(.system(size: 34, weight: .black))
                .foregroundStyle(.green)
                .padding(.horizontal, 8).padding(.vertical, 4)
                .overlay(RoundedRectangle(cornerRadius: 6).stroke(.green, lineWidth: 3.5))
                .rotationEffect(.degrees(-18))
                .padding(20)
                .opacity(likeOpacity)
                .accessibilityHidden(true)

            // NOPE stamp
            HStack {
                Spacer()
                Text("NOPE")
                    .font(.system(size: 34, weight: .black))
                    .foregroundStyle(.red)
                    .padding(.horizontal, 8).padding(.vertical, 4)
                    .overlay(RoundedRectangle(cornerRadius: 6).stroke(.red, lineWidth: 3.5))
                    .rotationEffect(.degrees(18))
                    .padding(20)
                    .opacity(nopeOpacity)
                    .accessibilityHidden(true)
            }
        }
        .frame(width: 320, height: 480)
        .rotationEffect(.degrees(rotation))
        .offset(offset)
        .gesture(
            DragGesture()
                .onChanged { value in
                    offset = value.translation
                    direction = value.translation.width > 0 ? .right : .left
                }
                .onEnded { value in
                    handleEnd(translation: value.translation)
                }
        )
        .animation(.interactiveSpring(response: 0.25, dampingFraction: 0.72), value: offset)
        .accessibilityElement(children: .combine)
        .accessibilityLabel("\(profile.name), age \(profile.age). \(profile.tagline). Swipe right to like, left to pass.")
    }

    private func handleEnd(translation: CGSize) {
        withAnimation(.spring(response: 0.42, dampingFraction: 0.74)) {
            if translation.width > 120 {
                offset = CGSize(width: 620, height: translation.height)
            } else if translation.width < -120 {
                offset = CGSize(width: -620, height: translation.height)
            } else {
                offset = .zero
                direction = nil
            }
        }
    }
}

// MARK: - Card Stack

struct TinderStackView: View {
    @State private var profiles: [Profile] = [
        Profile(name: "Alex",   age: 28, tagline: "Coffee enthusiast & trail runner",   color: .indigo),
        Profile(name: "Jordan", age: 25, tagline: "Chef by day, jazz fan by night",     color: .purple),
        Profile(name: "Morgan", age: 30, tagline: "Architect who loves to travel",      color: .teal),
        Profile(name: "Casey",  age: 27, tagline: "Dog mum & yoga instructor",          color: .pink),
        Profile(name: "Riley",  age: 26, tagline: "Photographer chasing golden hour",   color: .orange),
    ]
    @State private var topOffset: CGSize = .zero
    @State private var swipeDirection: SwipeDirection?

    var body: some View {
        VStack(spacing: 36) {
            ZStack {
                if profiles.isEmpty {
                    ContentUnavailableView(
                        "All caught up",
                        systemImage: "heart.slash",
                        description: Text("No more profiles for now.")
                    )
                } else {
                    ForEach(Array(profiles.prefix(3).reversed().enumerated()), id: \.element.id) { index, profile in
                        let stackCount = min(profiles.count, 3)
                        let isTop = index == stackCount - 1
                        let depth = CGFloat(stackCount - 1 - index)

                        SwipeCardView(
                            profile: profile,
                            offset: isTop ? $topOffset : .constant(.zero),
                            direction: isTop ? $swipeDirection : .constant(nil)
                        )
                        .scaleEffect(1.0 - depth * 0.035)
                        .offset(y: -depth * 12)
                        .zIndex(Double(index))
                        .onChange(of: topOffset) { _, newOffset in
                            if abs(newOffset.width) > 500 { removeTop() }
                        }
                    }
                }
            }
            .frame(height: 520)

            // Buttons
            HStack(spacing: 44) {
                CircleButton(icon: "xmark", tint: .red) { trigger(.left) }
                    .accessibilityLabel("Pass")
                CircleButton(icon: "heart.fill", tint: .green) { trigger(.right) }
                    .accessibilityLabel("Like")
            }
            .opacity(profiles.isEmpty ? 0 : 1)
        }
        .padding()
    }

    private func trigger(_ dir: SwipeDirection) {
        let x: CGFloat = dir == .right ? 620 : -620
        withAnimation(.spring(response: 0.42, dampingFraction: 0.74)) {
            topOffset = CGSize(width: x, height: 0)
        }
        DispatchQueue.main.asyncAfter(deadline: .now() + 0.45) { removeTop() }
    }

    private func removeTop() {
        guard !profiles.isEmpty else { return }
        profiles.removeFirst()
        topOffset = .zero
        swipeDirection = nil
    }
}

// MARK: - Helper

struct CircleButton: View {
    let icon: String
    let tint: Color
    let action: () -> Void

    var body: some View {
        Button(action: action) {
            Image(systemName: icon)
                .font(.title2.bold())
                .foregroundStyle(tint)
                .frame(width: 64, height: 64)
                .background(tint.opacity(0.1))
                .clipShape(Circle())
        }
    }
}

#Preview {
    TinderStackView()
}