Accordion Rail 2 - Rail with Growing Line

Pro

Accordion where a dark line grows down the left edge of the open item.

Shadcn Accordion Rail 2 component

Component data

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

Accordion Rail 2 component design & features

A hairline runs down the left of each item. When an item opens, a foreground line scales down from the top to fill its full height, so the marker follows the panel as it expands.

The growing line suits workflow and status lists where opening a stage should feel like progress.