Mobile
v1.0.0Added in 1.0.0
A stack of cards you decide on one at a time: swipe right to accept, left to reject, optionally up for later, with undo.
Drag the top card with a finger or the mouse: it follows and tilts, a stamp (Accept, Reject, Later) fades in on the side you are heading for, the matching round button tints and grows, and the cards behind rise into place. Past a quarter of the card (or with a quick flick) the stamp settles at full strength and the phone ticks; let go there and the card flies off at the speed of your throw and the next one is on top, let go earlier and it springs back. With only left and right allowed, vertical swipes on the card still scroll the page and the card only gives a little up and down. The round buttons under the deck throw the card the same way; the small undo button (a circular arrow) brings the last card back, flying in from the side it left. A save that fails (a rejected onSwipe promise) brings the card back with an error pill. Keyboard: Tab to the card, Left / Right (and Up when allowed) decide with the same animation, Backspace or Cmd/Ctrl+Z undo, and focus follows to the next card and to the empty state at the end. Buttons and links inside a card stay clickable and never start a drag. Every decision is announced to screen readers. With reduced motion the card does not tilt and leaves with a short fade and slide.
npx wingo-ui@latest add swipe-deckPro item: the CLI needs a Pro account. See plans
Approved: 0$0.00Rejected: 0
Coffee and snacks for the Tech Solutions meeting.
Swipe or use the Left and Right arrows. Backspace undoes.
Drag the card with the mouse, or Tab to it and use the arrow keys