Inbox · 6

MC
Maya Chen9:41
Design review moved to Thursday · Same room, 2pm. I added the new motion specs to the doc.
S
Stripe9:12
Your payout is on the way · $4,280.00 will arrive in your account by Friday.
V
Vercel8:57
Deployment ready · tweenly-docs was deployed to production in 42s.
JW
Jonas WeberYesterday
Re: Pricing page copy · Looks great. One nit on the enterprise tier wording.
G
GitHubYesterday
[tweenly] PR #214 approved · priya-k approved: feat: layout-animated feeds.
L
LinearMon
Weekly digest · 12 issues closed, 4 in review, 2 new cycles planned.

Drag rows left or right · Tab to a row and use the arrow keys

Controls

variant

threshold

elastic

haptics

accent

radiuspx

gappx

disabled

Swipe Row

Swipeable list rows with iOS-style reveal actions, full-swipe commits and floating cards. Removed rows fly off and the rest glide into place.

Open in v0

$ pnpm dlx shadcn@latest add @tweenly/swipe-row

import { SwipeList } from "@/components/swipe-row"

import { Archive, Clock, Trash2 } from "lucide-react"

const emails = [
  { id: "1", sender: "Maya Chen", subject: "Design review moved to Thursday" },
  { id: "2", sender: "Stripe", subject: "Your payout is on the way" },
  { id: "3", sender: "Vercel", subject: "Deployment ready" },
]

const leftActions = [{ id: "snooze", label: "Snooze", icon: <Clock /> }]

const rightActions = [
  { id: "delete", label: "Delete", icon: <Trash2 />, color: "#ef4444", destructive: true },
  { id: "archive", label: "Archive", icon: <Archive />, color: "#3b82f6", destructive: true },
]

export function Demo() {
  return (
    <SwipeList
      items={emails}
      getKey={(email) => email.id}
      leftActions={leftActions}
      rightActions={rightActions}
      renderItem={(email) => (
        <div className="px-4 py-3">
          <p className="text-sm font-medium">{email.sender}</p>
          <p className="text-sm text-muted-foreground">{email.subject}</p>
        </div>
      )}
    />
  )
}

Updates live as you change the controls. Only non-default props are included.