Swipe Action Card
Swipe a card sideways to reveal its actions. Free, MIT · Animated components › Stickers, tickets and boards
A card that slides sideways to uncover its actions. The card follows the finger, the actions grow in from under it, and on release it springs open or closed with the speed it was let go at (a flick is enough); one explicitly allowed action can run on a long swipe, on release, and fills the strip as it arms. Vertical movement stays page scrolling. Every action is also in the Actions toolbar, the result is shown only once the app confirms it, and Undo appears only when the app can undo.
Installation
npx valyro-cli@latest add swipe-action-cardnpx shadcn@latest add https://valyro.xyz/r/swipe-action-card.jsonnpm install valyro-ui
import 'valyro-ui/styles.css';
import { SwipeActionCard } from 'valyro-ui';Props
| Prop | Type | Default | |
|---|---|---|---|
itemId * | string | Stable identity of the card, passed back to onAction. | |
startActions | SwipeAction[] | [] | Actions uncovered by a swipe toward the inline end. |
endActions | SwipeAction[] | [] | Actions uncovered by a swipe toward the inline start. |
onAction * | (actionId: string, itemId: string) => SwipeActionResult | void | Promise<SwipeActionResult | void> | Runs an action. While its promise is pending the card waits and takes no other action; a rejection shows the error with a retry, and nothing pretends it succeeded. Whether the card then leaves the list is up to the app. | |
fullSwipeAction | { side: SwipeSide; actionId: string } | null | null | The one action a long swipe may run on release, by side; null (default) allows none. |
onUndo | (result: SwipeActionResult) => void | Promise<void> | Undoes a result the app marked undoable. Without it no Undo is offered. | |
undoDuration | number | 5000 | How long Undo stays, ms; focus and hover pause it, 0 keeps it until used. Expiry only hides it. Default 5000. |
disabled | boolean | false | No swipe and no actions. |
children * | ReactNode | The card content. Links, fields and text selection inside keep working. | |
labels | Partial<SwipeActionCardLabels> | Overrides for the built-in English text; keys left out keep their defaults. |
Related components
- Peel Sticker — A sticker you peel back by its corner to reveal what is under it
- Scratch Reveal — Scratch off a cover to reveal text or a picture
- Tear-off Ticket — A ticket whose stub tears off along the perforation
- Split-Flap Board — Mechanical departure board: only the changed characters flip
- Toggle — Toggle button with a springy response
- Flip Button — Two-sided button that flips on a spring
- Liquid Button — Button that fills with “liquid” on hover
- Theme Toggler — Light/dark switch with a View Transitions reveal
- GitHub Stars Button — Repository link with a rolling star count
- Share Button — Button that fans out social icons
- Code Tabs — Code variants in tabs: npm, pnpm, bun, with copy
- Number Wheel — Number on a spinning wheel with neighboring values
Previous: Split-Flap Board · Next: Glass Lens · All Animated components