Skip to content

Swipe Review

anime.js

A card queue for grading model answers. Drag right to accept, left to reject.

User asked
Can I get GST invoices for last year?
Model answered

Yes. Go to Billing, then Invoices, choose the year and download the PDF bundle.

atlas-m · 0.82 confidence
0 accepted · 0 rejected

Install

$ npx shadcn@latest add https://spotcheckui.com/r/swipe-review.json

Also installs animejs.

Usage

import { SwipeReview } from "@/components/spotcheck/swipe-review"

<SwipeReview items={queue} threshold={110} onAccept={markGood} onReject={markBad} />

The buttons do everything a drag does, so nobody needs to swipe. A vertical swipe still scrolls the page on phones.

Props

  • items * RequiredReviewItem[]Default —
  • thresholdnumberDefault 110How far to drag before a card is decided, in pixels.
  • onAccept(item: ReviewItem) => voidDefault —
  • onReject(item: ReviewItem) => voidDefault —
  • classNamestringDefault —

Keyboard

TabReach the Reject and Accept buttons
EnterGrade the top card

Reduced motion

Cards leave at once, and a short drag returns without a spring.