Card Swiper

Example

Usage

		<div class="h-[70vh] w-full">
	<CardSwiper
		cardData={(i) => ({
			title: `Card ${i}`,
			description: `Card ${i} description`,
			image: profiles[i % profiles.length]
		})}
	></CardSwiper>
</div>

API Reference

CardSwiper

A Tinder-style swipeable card stack with touch and keyboard support.

Property Type Description

cardData required

function

A function that returns card data for a given index. CardData: { title?: string; description?: string; image?: string; [key: string]: unknown }.

card

Snippet<[CardData]>

A custom snippet for rendering each card. Receives the card data as a parameter. Uses a default card template if not provided. Default: —

onswipe

function

Callback invoked when a card is swiped away. Default: —

swipe $bindable

function

A function to programmatically trigger a swipe. Bind to this to control swiping from outside. Default: —

minSwipeDistance

number

Minimum swipe distance (as a fraction of card width) to trigger a swipe. Default: 0.5

minSwipeVelocity

number

Minimum swipe velocity to trigger a swipe. Default: 0.5

arrowKeys

boolean

Whether arrow keys trigger swipes. Default: true

thresholdPassed $bindable

number

A reactive value (-1 to 1) indicating how far past the swipe threshold the current card is. Negative for left, positive for right. Default: 0

anchor

union

The vertical anchor point of rotation during swipe (as a fraction of card height). null disables rotation anchoring. Default: —

rotate

boolean

Whether cards rotate during swipe. Default: true

cardCount

number

The number of cards to render in the stack. Default: 5

Property

cardData

card

onswipe

swipe

minSwipeDistance

minSwipeVelocity

arrowKeys

thresholdPassed

anchor

rotate

cardCount