A loose pile of cards that fans into an arc like a hand of playing cards. Hovered cards rise and push their neighbors aside, and picking one lifts it to the front while the rest fold back.
npx shadcn@latest add https://hyperblur.dev/r/card-hand-fan.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/card-hand-fan.tsx.
import { CardHandFan } from "@/components/hyperblur/card-hand-fan"
<CardHandFan defaultOpen cardWidth={140} onSelect={(i) => setBoard(i)} />| Prop | Type | Default | Description |
|---|---|---|---|
| cards | { title: string; subtitle: string; colors?: [string, string, string] }[] | five boards | Cards to fan, with three colors for the art and swatches. |
| cardWidth | number | 150 | Card width in pixels. Everything scales from it. |
| spread | number | 11 | Degrees between neighboring cards in the fan. |
| defaultOpen | boolean | false | Starts fanned out instead of piled. |
| onOpenChange | (open: boolean) => void | undefined | Called when the pile fans out or closes with Escape. |
| onSelect | (index: number | null) => void | undefined | Called when a card is picked or released. |
| accent | string | "#2f7bff" | Accent color for focus rings, indicators and highlights. |
| className | string | undefined | Extra classes on the root element. |