Gallery Expand Panels

ProNew

A strip of panels where the focused or tapped panel grows to show its caption while the others narrow to labelled slivers.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.


pnpm dlx shadcn@latest add @tealmac-pro/gallery-expand-panels

Prop	Type	Default	Description
`panels`	`{ id: string; title: string; caption?: string; art?: string }[]`	`-`	Panels in the strip.
`defaultValue`	`string`	`first id`	Id of the panel that starts open.
`value`	`string`	`-`	Controlled open panel id.
`onValueChange`	`(id: string) => void`	`-`	Called when a panel opens.
`label`	`string`	`"Gallery panels"`	Accessible name of the group.

Tab moves into the strip; Left/Right (or Up/Down) move between panels and open the focused one.
Home and End jump to the first and last panel.
Enter or Space on a panel opens it.

The widths change with a short flex-grow transition after a click or focus; the caption fades in with opacity and transform.
With prefers-reduced-motion: reduce panels switch instantly with no transition.
Each panel is a button with aria-expanded.
The strip stacks vertically on narrow screens.

Guide and examples


pnpm dlx shadcn@latest add @tealmac-pro/gallery-expand-panels

Prop	Type	Default	Description
`panels`	`{ id: string; title: string; caption?: string; art?: string }[]`	`-`	Panels in the strip.
`defaultValue`	`string`	`first id`	Id of the panel that starts open.
`value`	`string`	`-`	Controlled open panel id.
`onValueChange`	`(id: string) => void`	`-`	Called when a panel opens.
`label`	`string`	`"Gallery panels"`	Accessible name of the group.

Tab moves into the strip; Left/Right (or Up/Down) move between panels and open the focused one.
Home and End jump to the first and last panel.
Enter or Space on a panel opens it.

The widths change with a short flex-grow transition after a click or focus; the caption fades in with opacity and transform.
With prefers-reduced-motion: reduce panels switch instantly with no transition.
Each panel is a button with aria-expanded.
The strip stacks vertically on narrow screens.