Splay Cards
A leaning rack of 3D plates — hover one and the stack splays open, the chosen plate turning to face you while its title takes over the caption line.
Hover a card · the rack splays open
Installation
▸ Run the following command
npx shadcn@latest add https://www.mellowui.com/r/splay-cards.json▸ Or install manually
- Install dependencies:
pnpm add motion - Copy the source from the Code tab above.
- Place it at
components/mellow/splay-cards.tsx - Import and use.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| items | SplayCardsItem[] | — | Plates in the rack. Each item is `{ title, meta?, content }`. |
| heading | string | — | Caption line shown while nothing is active. |
| width | number | 230 | Plate width in px. |
| height | number | 330 | Plate height in px. |
| spacing | number | 56 | Horizontal offset between resting plates in px. |
| splay | number | 96 | How far the rear plates slide when the stack parts, in px. |
| lean | number | 46 | Resting lean of each plate in degrees. |
| onActiveChange | (index: number | null) => void | — | Fired when the active plate changes. |
| className | string | — | Additional CSS classes. |