Deck

A swipeable card stack component with smooth animations. Renders cards in a stack that can be swiped left or right. Used for creating a Tinder-like experience with interactive card navigation.

byShadcnblocks.com from Kibo UI

Installation

terminal

pnpm dlx layro-cli add @shadcnblocks/deck

npx layro-cli add @shadcnblocks/deck

npx layro-cli add @shadcnblocks/deck

bunx layro-cli add @shadcnblocks/deck

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client";

import { useControllableState } from "@radix-ui/react-use-controllable-state";
import {
  motion,
  type PanInfo,
  useMotionValue,
  useTransform,
} from "motion/react";
import {
  Children,
  cloneElement,
  type HTMLAttributes,
  type ReactElement,