shadcn.io is not affiliated with official shadcn/ui
Card Swipe Dialog Block for Radix UI
A hiring tool's board with its review drawer shown open over three drawn lanes: six candidate cards in a stack, Keep, Pass and Undo, arrow keys, a counter, and a summary of who was kept that moves them to the Screen lane.
Installation
Overview
Triage a pile of applicants one card at a time, with this card swipe drawer for React with Radix UI. It opens from the hiring board of Sieveworks, a hiring tool: the header holds an outline Button, and the board it opens over is drawn under a soft scrim inside a hairline frame with a plus mark on each corner, with three lanes, New, Screen and Interview. The Drawer rises from the bottom with a grabber and shows a stack of six candidates: initials in an Avatar, a name, a role and years, three skills as Badges and one line, with the next two cards peeking from behind. Keep and Pass send the top card away with a slide and a tilt, the arrow keys do the same, Undo brings it back, and the end says Kept 4, passed 2 with the names. Move kept to Screen, the only Shine Button, puts the kept people in the Screen lane behind. For preview the drawer is drawn open in place at the foot of the frame when the page loads; the header button opens the real Drawer, with the same stack. For recruiting, content moderation, inbox triage and any queue where each item gets a yes or a no.
FAQ
Why is the drawer already open, and what do I keep?
So you can see it without a click. On load the drawer is a copy drawn in place at the foot of the drawn board: a native dialog element that isn't modal, so nothing is trapped, hidden or focused, and the page around the preview keeps working. The Review 6 new button in the header opens the real Drawer, modal, with its grabber and swipe to close, Escape, and focus return, and the copy stays closed until a reload. Both show the same SwipeFields component and share the block's state, so a card sent away in the copy stays sent away in the real one. In your app keep the Drawer and drop the copy: the "in-place" state, the scrim and the dialog element inside the frame.
How does the stack work, and is anything dragged?
All six cards are in the page at once, each placed by its distance from the top card: the top one, the next two peeking, the rest hidden behind, and the ones already decided sent off to the end (kept) or the start (passed) with a translate and a tilt. Keep, Pass and Undo only change that distance, so every move is a 300 ms CSS transition and nothing runs a frame loop. There is no drag; you can add pointer drag to the top card. With reduced motion on, the cards swap without sliding. Only the top card is exposed to assistive technology.
Which keys work?
The arrow keys decide the top card while focus is on the Pass, Undo or Keep button: the arrow toward the end of the line keeps and the other passes, and in a right-to-left language the two swap, which the hint under the buttons follows. Enter or Space presses the focused button as usual. Once all six are decided, Keep and Pass answer that the deck is reviewed, and Undo brings the last card back.
What stays local, and how do I wire it for real?
Everything. Move kept to Screen puts the kept initials in the Screen lane of the drawn board and empties New, and nobody is contacted. The button stays disabled until the last card is decided and after the move. In your app send the two lists from move to your applicant API, and load CANDIDATES from the New stage. The block uses no randomness.
Is it accessible from the keyboard?
Yes. The real drawer is named by its title and described by its sentence, focus stays inside until it closes, and Escape and Close return focus to Review 6 new. The trigger is the button wrapped in DrawerTrigger with asChild, and the drawer is controlled with open and onOpenChange. This version's drawer leaves focus on the button when it opens unless it is given autoFocus, which the block sets. The copy shown on load moves no focus; Escape inside it and Close shut it and put focus on Review 6 new. Closing keeps the decisions, so reopening shows the same deck.