Image Accordion

A row of image panels where the hovered or focused one widens to show its caption.

Examples

Image accordion basic

Hover a panel with the mouse, tab to it with the keyboard, or tap it. Below the sm breakpoint the panels stack and grow in height.

Panels as links

Give an item an href and its panel becomes a link. Focus opens it before Enter follows it, and on a touch screen the first tap opens it and the second follows it.

Walking the coast in four daysA route with a ferry at both ends
Where the valley endsThree cabins, no road
Hills after the rainShort loops for wet weeks

Vertical

orientation='vertical' keeps the panels stacked at every width, for a narrow column.

Installation

npx shadcn@latest add https://ui.ndekocode.dev/r/motion-image-accordion.json

Component API

ImageAccordion

Prop	Type	Default	Description
`items`	`ImageAccordionItem[]`		The panels.
`defaultValue`	`string`	the first id	The panel open first.
`value`	`string`		The open panel, when controlled.
`onValueChange`	`(value: string) => void`		Called when another panel opens.
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	Horizontal stacks below `sm`; vertical stacks at every width.
`className`	`string`		Classes of the list. The height lives here (`h-[28rem] sm:h-80` by default).

ImageAccordionItem

Field	Type	Description
`id`	`string`	A unique id.
`src`	`string`	The image source.
`alt`	`string`	The description of the image.
`title`	`string`	The caption title, also the name of the panel.
`description`	`string`	An optional second line in the caption.
`href`	`string`	Turns the panel into a link.

The open panel grows through a flex-grow transition of 500ms on --ease-out-strong, so the panels share the row without measuring anything. The image stays centred and the panel crops it, so a widening panel reads as a window opening rather than a picture stretching. The caption arrives 150ms later and leaves in 100ms.