Swipeable Card

Cards with swipe-to-reveal actions for mobile-friendly interactions.

Preview

Swipe left or right to reveal actions

Swipe me left or right!

Reveals different actions on each side

New notification

Someone liked your post

Usage

import { SwipeableCard, SwipeableNotification } from "@/components/profile"

// Generic swipeable
<SwipeableCard
  leftActions={[
    { icon: <Star />, color: "bg-yellow-500", onClick: handleStar },
  ]}
  rightActions={[
    { icon: <Trash2 />, color: "bg-red-500", onClick: handleDelete },
  ]}
>
  <div>Your content here</div>
</SwipeableCard>

// Pre-built notification
<SwipeableNotification
  type="like"
  title="New like"
  message="Someone liked your post"
  timestamp="2m ago"
  onDelete={() => {}}
  onMarkRead={() => {}}
/>

Props

Prop	Type	Description
leftActions	SwipeAction[]	Actions on left swipe
rightActions	SwipeAction[]	Actions on right swipe
children	ReactNode	Card content
threshold	number	Swipe threshold (px)