shadcn.io is not affiliated with official shadcn/ui
Swipe Deck Features Block for Ark UI
A features section as a triage deck of feature requests: drag the top card past a threshold to keep it or skip it, or use the Keep and Skip buttons and the arrow keys, with a tally and a Start over button.
Installation
Overview
A features section for React with Ark UI, built as a deck you triage. Seven feature requests from a feedback tool sit in a pile of three; the top card follows your pointer as you drag it, tilts with the drag, and shows a Keep or Skip stamp that fades in with distance. Drag past a threshold and the card flies off; let go sooner and it springs back. The Keep and Skip buttons and the arrow keys do the same, so nothing needs a pointer. A tally under the deck reads "4 kept, 3 skipped" with how many are left, "Start over" deals the deck again, and a floor hairline separates the deck from its controls. It's built from Button, Shine Button, Badge, Kbd and the Guides line kit, with your theme's tokens for every colour.
FAQ
How do I change the requests?
Edit REQUESTS at the top of the file: each has an id, an area, the team that asked first, a title, a sentence, votes, teams and an effort size. The pile shows three at a time and the tally is counted from the decisions, so the number of requests can be anything.
How does the drag work?
The pointer handlers write one CSS variable on the top card, the distance in pixels, and the card's position, tilt and stamps all follow from it in CSS: no animation loop runs. On release, a distance past 96 pixels keeps or skips the card and a shorter one clears the variable, so the card springs back with a transition. Vertical swipes still scroll the page on a touch screen.
How does it work from the keyboard?
Focus the deck (it is a named list and a tab stop) and press the arrow keys: toward the end of the line keeps the card and toward the start skips it, which flips in a right-to-left page. The Keep and Skip buttons work with Enter and Space. After each decision a polite status line says what happened and how many are left, and when the last card goes, focus moves to "Start over".
What happens with reduced motion?
The card leaves at once without the flight, the tilt is off, and the pile does not animate. The drag itself still moves the card with your pointer, because that is direct manipulation and not a decoration.