Accordion Nested 2 - Nested with Tree Lines

Pro

Two-level accordion with a left rule and branch connectors for child items.

Shadcn Accordion Nested 2 component

Component data

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

Accordion Nested 2 component design & features

Top-level sections use a right chevron and stay open independently. Child items hang off a vertical rule with a short branch line, and each child opens its own answer.

Tree lines suit documentation outlines and help centres with a section and topic hierarchy.