Feature 426 - Accordion with crossfading image

Pro

Numbered accordion whose open item crossfades a tall photograph with a caption and counter.

Shadcn Feature 426 block

Component data

ID
feature426
Access
pro
Created
Oct 30, 2026
Type
block
Libraries
Radix UI, Base UI, React Aria

Feature 426 block design & features

The block sets a heading, paragraph and a numbered accordion in the left column beside a tall photograph on the right. Each accordion trigger shows a mono number, a title and a round plus button that fills in when the item is open.

Opening an item expands its description and two detail points with a smooth height transition, and crossfades the photograph on the right to match. A caption and counter at the bottom of the photo update with it.

The accordion uses plain buttons with aria-expanded and labelled regions, so the image sync stays simple and accessible. Transitions are switched off for visitors who prefer reduced motion.

On mobile the large photo hides and each open item shows its own image inline below the details.