Browse components
Swipe Row
List row you swipe right to archive or left to delete, with rubber-band resistance, an armed pop past the threshold and a collapse on commit. Arrow keys + Enter work too.
Installation
npx shadcn@latest add @glint-ui/swipe-rowFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/swipe-row.json
Usage
import { SwipeRow } from "@/components/ui/swipe-row";
{mails.map((m) => (
<SwipeRow
key={m.id}
label={m.subject}
onArchive={() => archive(m.id)}
onDelete={() => remove(m.id)}
>
<MailPreview mail={m} />
</SwipeRow>
))}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| threshold | number | 110 | Px the row must travel to commit on release. |
| actionWidth | number | 80 | Width of the revealed action when the row rests half open. |
| archiveColor | string | "#22c55e" | Right-swipe action color. |
| deleteColor | string | "#ef4444" | Left-swipe action color. |
| archiveLabel | string | "Archive" | Right-swipe action label. |
| deleteLabel | string | "Delete" | Left-swipe action label. |
| label | ReactNode | — | Accessible name of the row. |
| onArchive | ReactNode | — | Called after the row swipes out and collapses. Omit to disable right swipe. |
| onDelete | ReactNode | — | Called after the row swipes out and collapses. Omit to disable left swipe. |
| className | string | — | Extra classes for the root element. |