A list row that reveals Archive on a swipe right and Delete on a swipe left. It snaps open or closed with momentum, and the arrow keys reveal the same actions.
Maya Okonkwo
Re: Lighting specs for the studio build
Jonas Eklund
Invoice 2041 is ready to review
npx shadcn@latest add https://hyperblur.dev/r/micro-swipe-row.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/micro-swipe-row.tsx.
import { MicroSwipeRow } from "@/components/hyperblur/micro-swipe-row"
<MicroSwipeRow title="Maya Okonkwo" subtitle="Re: Lighting specs" time="9:41" onArchive={() => archive(id)} />| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | "Maya Okonkwo" | Row title. Also seeds the initials avatar color. |
| subtitle | string | Second line in muted text, truncated to one line. | |
| time | string | "9:41" | Timestamp at the top right. |
| reveal | "none" | "archive" | "delete" | Controlled revealed side. Pair with onRevealChange. | |
| defaultReveal | "none" | "archive" | "delete" | "none" | Initial revealed side when uncontrolled. |
| archiveLabel | string | "Archive" | Label of the action shown on a swipe right. |
| deleteLabel | string | "Delete" | Label of the action shown on a swipe left. |
| accent | string | "#2f7bff" | Background of the archive action. |
| danger | string | "#ff4d5e" | Background of the delete action. |
| idle | boolean | true | Peek at the actions now and then until the pointer or focus arrives. |
| onRevealChange | (reveal: MicroSwipeRowReveal) => void | Called when the row snaps to a new state. | |
| onArchive | () => void | Called when Archive is pressed. The row then slides away and collapses. | |
| onDelete | () => void | Called when Delete is pressed. The row then slides away and collapses. |