Swipe Deck

ProNew

A stack of cards decided one at a time by dragging left or right, buttons or arrow keys, with undo and an empty state.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.


pnpm dlx shadcn@latest add @tealmac-pro/swipe-deck

Prop	Type	Default	Description
`items`	`T[]`	-	Cards in the deck, top card first.
`getKey`	`(item: T) => string`	-	A stable, unique key per item.
`getLabel`	`(item: T) => string`	`getKey`	Plain-text name used in announcements.
`renderCard`	`(item: T) => ReactNode`	-	Renders a card face.
`onSwipe`	`(item: T, direction: "left" \| "right") => void`	-	Called when a card leaves the deck.
`onUndo`	`(item: T) => void`	-	Called when the last decision is undone.
`leftLabel`	`string`	`"Skip"`	Left button name and drag stamp.
`rightLabel`	`string`	`"Keep"`	Right button name and drag stamp.
`leftIcon`	`ReactNode`	cross	Icon in the left button.
`rightIcon`	`ReactNode`	check	Icon in the right button.
`threshold`	`number`	`110`	Drag distance in pixels that counts as a swipe. A fast flick also counts.
`visible`	`number`	`3`	Cards rendered in the stack, including the top card.
`renderEmpty`	`(reset: () => void) => ReactNode`	-	Empty state once every card is decided.
`hideControls`	`boolean`	`false`	Hide the buttons and the counter.
`stackClassName`	`string`	-	Size of the card area. Defaults to `aspect-[4/5] max-w-xs`.

Also accepts div props.

The stack is a focusable group with aria-roledescription="card deck". Left and Right arrows decide the top card, Backspace undoes the last decision.
The buttons do the same and carry the action names, so the deck works without dragging.
Cards peeking behind the top card are hidden from assistive technology.
Each decision is announced, for example "Plan: Dark mode for embeds. 4 left."
With reduced motion cards fade out instead of flying off, and do not rotate while dragged.

Guide and examples


pnpm dlx shadcn@latest add @tealmac-pro/swipe-deck

Prop	Type	Default	Description
`items`	`T[]`	-	Cards in the deck, top card first.
`getKey`	`(item: T) => string`	-	A stable, unique key per item.
`getLabel`	`(item: T) => string`	`getKey`	Plain-text name used in announcements.
`renderCard`	`(item: T) => ReactNode`	-	Renders a card face.
`onSwipe`	`(item: T, direction: "left" \| "right") => void`	-	Called when a card leaves the deck.
`onUndo`	`(item: T) => void`	-	Called when the last decision is undone.
`leftLabel`	`string`	`"Skip"`	Left button name and drag stamp.
`rightLabel`	`string`	`"Keep"`	Right button name and drag stamp.
`leftIcon`	`ReactNode`	cross	Icon in the left button.
`rightIcon`	`ReactNode`	check	Icon in the right button.
`threshold`	`number`	`110`	Drag distance in pixels that counts as a swipe. A fast flick also counts.
`visible`	`number`	`3`	Cards rendered in the stack, including the top card.
`renderEmpty`	`(reset: () => void) => ReactNode`	-	Empty state once every card is decided.
`hideControls`	`boolean`	`false`	Hide the buttons and the counter.
`stackClassName`	`string`	-	Size of the card area. Defaults to `aspect-[4/5] max-w-xs`.

Also accepts div props.

The stack is a focusable group with aria-roledescription="card deck". Left and Right arrows decide the top card, Backspace undoes the last decision.
The buttons do the same and carry the action names, so the deck works without dragging.
Cards peeking behind the top card are hidden from assistive technology.
Each decision is announced, for example "Plan: Dark mode for embeds. 4 left."
With reduced motion cards fade out instead of flying off, and do not rotate while dragged.