Keystroke Card Deck

Built for review queues, agent suggestions and batch confirmations — anything you decide one card at a time. The top card is shown in full while the next two peek out below it; with the deck focused, number keys 1–3 pick the matching option (or just click the button). The keycap presses down, the option highlights, then the card flies off toward the option's direction (1 up-left, 2 up, 3 up-right) and the cards behind move forward. Backspace or Ctrl+Z undoes the last card, which flies back along its original path. Once everything is answered, a summary shows the count for each option. The answer record supports controlled and uncontrolled modes.

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

<KeystrokeCardDeck/>

    </div>
  );
}

Installation

npx webberui@latest add https://webberui.com/r/keystroke-card-deck.en.json

Usage

import { KeystrokeCardDeck } from "@/components/ui/keystroke-card-deck";

<KeystrokeCardDeck
  cards={[
    { id: "dunning", title: "Send payment reminders to 3 customers?", body: "Three invoices are 14 days overdue." },
    { id: "report", title: "Move the weekly report to Friday 17:00?" },
  ]}
  onAnswer={(cardId, optionKey) => console.log(cardId, optionKey)}
  onComplete={(answers) => console.log("all done", answers)}
/>

Props

KeystrokeCard

KeystrokeCardOption

KeystrokeCardAnswers is Record<string, string> (card id to option key).

How it works

• Timing is exposed as CSS variables: --wb-keystroke-deck-press (keycap press, default 80ms), --wb-keystroke-deck-highlight (gap between the option highlight and the fly-off, default 150ms) and --wb-keystroke-deck-accent (highlight colour, default #3b82f6).
• The current card is the first card in cards without an answer; undo steps back through the order answers were given inside the component, and if a controlled value is changed externally it falls back to the last answered card in card order.
• In global mode keys are not intercepted while focus is in an input, textarea, select or contenteditable element; keys pressed during IME composition (isComposing or keyCode 229) are always ignored.
• Cards stack in a single CSS grid cell, so the container height follows the tallest card without a fixed height.

Accessibility

• The deck is a role="region" named via aria-label, with aria-describedby pointing at the "press 1–3 to respond" hint
• The top card is a role="group"; options are buttons with aria-keyshortcuts, and the undo button works with the mouse as well
• Cards below the top one get aria-hidden and inert, so Tab and screen readers skip them
• Each answer or undo is announced in an aria-live region, e.g. "Selected: Approve, 5 left"
• When answering by clicking an option, focus is handed back to the deck container so it is not lost when the card unmounts
• When the user has reduce motion enabled at the system level, cards simply fade out and the next one snaps into place, with no fly-off or spring restacking