Product panels set at staggered heights with titles running up their edges. The open panel levels out, its title swings from vertical to horizontal on a spring and the product rises into view.
npx shadcn@latest add https://hyperblur.dev/r/image-accordion-stagger.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/image-accordion-stagger.tsx.
import { ImageAccordionStagger } from "@/components/hyperblur/image-accordion-stagger"
<ImageAccordionStagger height={340} stagger={24} />| Prop | Type | Default | Description |
|---|---|---|---|
| items | { title: string; notes: string; price: string; colors?: [string, string, string] }[] | five fragrances | Panels to show, with three colors for the art and bottle. |
| value | number | undefined | Controlled index of the open panel. |
| defaultValue | number | 0 | Initial open panel when uncontrolled. |
| onChange | (index: number) => void | undefined | Called when a panel opens. |
| openOn | "hover" | "click" | "hover" | Whether hovering a panel opens it. Click and arrow keys always work. |
| height | number | 360 | Height of the row in pixels, stagger included. |
| stagger | number | 28 | Largest vertical offset between panels in pixels. |
| accent | string | "#2f7bff" | Accent color for focus rings, indicators and highlights. |
| className | string | undefined | Extra classes on the root element. |