Accordion Rail 3 - Rail with Dot

Pro

Accordion on a continuous left rail with a dot per item that fills when it opens.

Shadcn Accordion Rail 3 component

Component data

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

Accordion Rail 3 component design & features

A hairline rail runs down the left of the whole list, with a ring dot at each title. The open item's dot fills, like a status timeline.

Use it for export, deployment or order status lists that read top to bottom.