Card Fan
A hand of cards fanned in an arc — hover one and it straightens and rises out of the fan while its neighbours part in sympathy.
Installation
▸ Run the following command
npx shadcn@latest add https://www.mellowui.com/r/card-fan.json▸ Or install manually
- Install dependencies:
pnpm add motion - Copy the source from the Code tab above.
- Place it at
components/mellow/card-fan.tsx - Import and use.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| items | ReactNode[] | — | Card faces, left of the fan first. |
| width | number | 190 | Card size in px. |
| height | number | 264 | Card height in px. |
| arc | number | 52 | Total fan angle in degrees. |
| lift | number | 56 | How far a hovered card rises out of the fan, in px. |
| onSelect | (index: number) => void | — | Called with the card index on click or Enter. |
| className | string | — | Additional CSS classes. |