Coverflow

motion

Cards on a 3D shelf that you flick through. A throw carries momentum and lands on the nearest card.

invoices-ocr · 6,050 pairs · 0.884 · updated 28 Oct

Install

$ npx shadcn@latest add https://spotcheckui.com/r/coverflow.json

Also installs motion.

Usage

import { Coverflow } from "@/components/spotcheck/coverflow"

const items = [
  { value: "support-qa", content: <DatasetCard name="support-qa" />, summary: "2,400 pairs" },
  { value: "tool-use", content: <DatasetCard name="tool-use" />, summary: "1,180 pairs" },
]

<Coverflow label="Datasets" items={items} defaultValue="support-qa" onValueChange={setDataset} />

Each card's content is yours, and screen readers read its text. Keep it to text, because a listbox option doesn't expose buttons or links inside it. summary prints one line beside the buttons for the selected card.

Tapping a side card, the arrow keys and the previous and next buttons all change the selection, so nobody needs to flick. A vertical swipe over the shelf still scrolls the page on phones.

Cards take half the width of the shelf, up to 220px, and they're 262px tall.

Props

label * RequiredstringDefault —Names the list for screen readers.
items * RequiredCoverflowItem[]Default —
valuestringDefault —The selected card's value, when you control it.
defaultValuestringDefault —The starting value, when the shelf manages itself.
onValueChange(value: string) => voidDefault —Runs when the shelf lands on a different card.
classNamestringDefault —Added to the outer element.

Keyboard

← →	Move one card
Home	Jump to the first card
End	Jump to the last card

Reduced motion

The shelf jumps to the card with no spin or coasting.