Accordion Underline 2 - Underline with Sweep

Pro

Accordion whose header underline sweeps in from the left when the item opens.

Shadcn Accordion Underline 2 component

Component data

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

Accordion Underline 2 component design & features

Each header has a hairline in the border colour. Opening an item scales a foreground line in from the left edge on top of it, and closing sweeps it back out.

The sweep adds motion to service or process lists without moving any text.