Shadcn Collapsible File Tree

When to use

• Cards and panels that hold back secondary detail, such as order items, a usage breakdown or a profile
• Optional settings, advanced form fields and single help answers kept closed until asked for
• Nested navigation menus and file trees, built by placing one collapsible inside another

When not to use

• A file explorer people move through with arrow keys rather than row by row clicks: use the Tree component
• Several stacked sections that open and close as one group, often one at a time: use the Accordion component
• A complete account or workspace configuration page of grouped switch rows: use the Settings blocks

Agent notes

• Replace fileTree with your files; selection keys on name, so give rows a unique id before 2 folders hold the same file name
• The download and delete Button icons have no handlers, and TabsList switches no content, so Outline shows the same files
• Every row renders Item as a div, so Enter and Space never open a folder or select a file; render rows as buttons for keyboard use
• Base UI parts flag open state with data-open on root and panel and data-panel-open on the trigger, while Radix parts set a state attribute
• A closed CollapsibleContent renders none of its children in either twin, so that text is missing from the server HTML
• Base UI CollapsibleTrigger swaps its element through render and the Radix one through asChild; each reads only its own prop