Accordion Underline 3 - Underline from Centre

Pro

Accordion whose header underline grows outward from the centre on open.

Shadcn Accordion Underline 3 component

Component data

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

Accordion Underline 3 component design & features

A foreground line scales out from the middle of the header when its item opens, over a muted hairline that is always visible.

Use it where a symmetrical accent fits better than a left-to-right sweep, such as centred FAQ layouts.