Accordion Highlight 2 - Highlight with Detached Item

Pro

Stacked accordion where the open item pulls away from the stack and rounds its corners.

Shadcn Accordion Highlight 2 component

Component data

ID
accordion/accordion-highlight-2
Access
pro
Created
Oct 30, 2026
Type
example
Libraries
Radix UI, Base UI, React Aria

Accordion Highlight 2 component design & features

Closed items form one segmented stack. The open item gains vertical margin and full rounding, and its neighbours round the corners that face it, so it looks detached from the group.

Detached items suit feature lists and product specs where the open item should feel lifted out.