Swipe Deck

Decide by flinging cards: LIKE / NOPE stamps fade in as you lean; velocity throws count.

Animated · Full motion: idle animation, physics and effects. animated (default)

Drag past the threshold or flick fast to throw the card with spin; the next card scales up from the stack. Buttons and ← → for everyone else.

Installation

$ npx shadcn@latest add https://guetix.com/r/swipe-deck.json

Uses the shadcn CLI. It creates components/guetix/swipe-deck.tsx and installs nothing else.

example.tsx

import { SwipeDeck } from "@/components/guetix/swipe-deck";

export default function Example() {
  return <SwipeDeck />;
}

Product discoveryOnboarding preferencesDating / travel apps

Prop	Type	Default	Description
cards	{ id; title; subtitle?; gradient?; emoji? }[]	—	Cards.
onSwipe	(card, dir) => void	—	Decision handler.
animated	boolean	true	false = the calm “Regular” version (no idle or ambient motion).