Labs • Portfolio

Components

Controls

Swipe Card Deck

Tinder-style swipe deck with directional action overlays, velocity-based dismissal, spring snap-back, and stacked depth layers — zero competing npm packages.

All components
Nezuko Kamado

Nezuko Kamado

Demon · Taisho Japan

Blood Demon ArtSunlight
Tanjiro Kamado

Tanjiro Kamado

Demon Slayer · Taisho Japan

Water BreathingSun Breathing
Nope
Like
Super
Pass
Super
Like

Installation

Coming soon. Components will be available via the registry once checkout goes live.

Usage

<SwipeCardDeck
  cards={[
    { id: "1", content: <MyCard data={item1} /> },
    { id: "2", content: <MyCard data={item2} /> },
  ]}
  onSwipeRight={(card) => approve(card.id)}
  onSwipeLeft={(card) => reject(card.id)}
  onSwipeUp={(card) => superLike(card.id)}
  onEmpty={() => console.log("deck exhausted")}
/>

Props

PropTypeDefaultDescription
cardsSwipeDeckCard[]—Array of cards. Each needs an id and a content (ReactNode) to render. Defaults to a built-in demo set.
onSwipeLeft(card: SwipeDeckCard) => void—Fired when the top card is dismissed to the left.
onSwipeRight(card: SwipeDeckCard) => void—Fired when the top card is accepted to the right.
onSwipeUp(card: SwipeDeckCard) => void—Fired when the top card is swiped upward (super-like / priority action).
onEmpty() => void—Fired when all cards have been swiped.
widthnumber300Card width in px.
heightnumber380Card height in px.
classNamestring—Tailwind classes on the root container.

Use cases

  • Job / candidate matching

    Swipe right to shortlist candidates, left to pass, up to flag as top priority.

  • Content discovery

    Browse articles, products, or recommendations with a fluid gesture instead of a list.

  • Onboarding preference capture

    Let users swipe through interest cards to personalise their feed before they start.

  • Task triage

    Swipe through inbox items — right to action, left to archive, up to escalate.