Browse components
Card Swap
A skewed 3D stack of cards that cycles on its own: the front card drops away and springs back in behind the others.
Installation
npx shadcn@latest add @glint-ui/card-swapFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/card-swap.json
Usage
import { CardSwap } from "@/components/ui/card-swap";
<CardSwap cards={[<div key="a">One</div>, <div key="b">Two</div>, <div key="c">Three</div>]} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| cards | ReactNode | — | Array of card nodes. |
| width | number | 340 | Card width in px. |
| height | number | 240 | Card height in px. |
| distanceX | number | 56 | Horizontal px between cards. |
| distanceY | number | 56 | Vertical px between cards. |
| skew | number | 6 | Stack skew in degrees. |
| delay | number | 3500 | Ms between swaps. |
| pauseOnHover | boolean | true | Pause while hovered. |
| easing | "elastic" | "smooth" | "elastic" | Motion style. |
| className | string | — | Extra classes for the root element. |