A row of image panels where the hovered or focused one grows wide and the rest fold into slim strips with vertical labels.
npx shadcn@latest add https://hyperblur.dev/r/gallery-accordion.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/gallery-accordion.tsx.
import { GalleryAccordion } from "@/components/hyperblur/gallery-accordion"
<GalleryAccordion height={200} items={[{ title: "Lofoten", subtitle: "Arctic Norway" }, { title: "Kyoto" }]} />| Prop | Type | Default | Description |
|---|---|---|---|
| items | { title: string; subtitle?: string; color?: string; src?: string }[] | 5 sample panels | Panels from left to right. Without src a gradient from color is used. |
| value | number | Controlled index of the open panel. Pair with onChange. | |
| defaultValue | number | 0 | Initial open panel when uncontrolled. |
| onChange | (index: number) => void | Called when another panel opens. | |
| openOn | "hover" | "click" | "hover" | Pointer gesture that opens a panel. Focus and the arrow keys always open one. |
| height | number | 200 | Height of the gallery in pixels. |
| grow | number | 5 | How many times wider the open panel is than a folded one. |
| idle | boolean | true | Open the panels one after another until the pointer arrives. Uncontrolled only. |