Notification cards stacked with depth. Hover, focus or the Expand button spreads them into a list, and each card dismisses with a swipe or its close button. New cards drop in from the top.
npx shadcn@latest add https://hyperblur.dev/r/card-stack-expand.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/card-stack-expand.tsx.
import { CardStackExpand } from "@/components/hyperblur/card-stack-expand"
<CardStackExpand defaultItems={[{ id: "1", title: "Deploy finished", body: "web-app is live", time: "now" }]} />| Prop | Type | Default | Description |
|---|---|---|---|
| items | { id: string; title: string; body?: string; time?: string; color?: string; mark?: string }[] | Controlled list, newest first. Pair with onChange. | |
| defaultItems | StackNotification[] | Initial list when uncontrolled. Four sample notifications are used when omitted. | |
| onChange | (items: StackNotification[]) => void | Called after a card is dismissed or added. | |
| incoming | StackNotification[] | Pool the New button draws from, in order. Four samples are used when omitted. | |
| title | string | "Notifications" | Header title. |
| max | number | 4 | Most cards shown when expanded. The rest stay tucked under the stack. |
| cardHeight | number | 52 | Height of each card in pixels. |
| gap | number | 8 | Space between cards when expanded, in pixels. |
| autoPeek | number | 0 | Milliseconds between short automatic expansions while nothing is hovered or focused. 0 turns it off. |
| reserveSpace | boolean | false | Keep the expanded height reserved so the content below does not move. |
| accent | string | "#2f7bff" | Focus ring color. |