File Tree
A collapsible file tree with indent guides, folder open/close animation and full arrow-key navigation.
file-tree.tsxfile-tree.css
Checking access…
Overview
Folders expand with a height animation and a rotating chevron. Thin indent guides make depth readable, and the selected file is highlighted.
It follows the WAI-ARIA tree pattern: Up/Down move, Right opens or enters, Left closes or goes to the parent, Enter selects.
When to use
- Code viewers, docs sidebars, asset managers.
When not to use
- Shallow lists: use a plain list.
Installation
$
pnpm dlx shadcn@latest add https://sundaeui.dev/r/file-tree.json$
npx shadcn@latest add https://sundaeui.dev/r/file-tree.json$
yarn dlx shadcn@latest add https://sundaeui.dev/r/file-tree.json$
bunx --bun shadcn@latest add https://sundaeui.dev/r/file-tree.jsonWorks in any React project. Files are written to components/sundae/. Read the source in the stage’s Code view. Pro assets need a personal token. See authenticated installs.
- No dependencies beyond React 18 or later.
- Copy file-tree.tsx and file-tree.css into components/sundae/.
- The CSS file is imported by the component, so no extra configuration is needed.
- Import the component and use it as shown below.
Usage
import { FileTree } from '@/components/sundae/file-tree'
<FileTree />Props
| Prop | Type | Default |
|---|---|---|
data*Nodes: { id, name, children? }. | TreeNode[] | — |
defaultExpandedOpen folder ids. | string[] | — |
onSelectCalled when a file is selected. | (id: string) => void | — |
fillSurface: dark or light. | 'dark' | 'light' | 'dark' |
Accessibility
- role="tree" / "treeitem" / "group" with aria-expanded, aria-level and aria-selected.
- Roving tabindex: one item is tabbable at a time.
- Reduced motion removes the movement and keeps every state change.
Customization
- Colours are CSS custom properties on .sd-ftr; override them in your own stylesheet.
- fill="light" switches the built-in light palette.
Keyboard
- ↑ / ↓
- Previous / next item
- →
- Open folder / first child
- ←
- Close folder / parent
- Enter
- Select
FAQ
- Is File Tree free?
- File Tree is part of Sundae Pro. The live preview is open to everyone; the source installs with a Pro account.
- How do I install File Tree?
- Run npx shadcn@latest add https://sundaeui.dev/r/file-tree.json. The files are written to components/sundae/. It has no dependencies beyond React 18 or later.
- Does File Tree support keyboard and screen readers?
- role="tree" / "treeitem" / "group" with aria-expanded, aria-level and aria-selected. Roving tabindex: one item is tabbable at a time.
- Does File Tree respect reduced motion?
- Reduced motion removes the movement and keeps every state change.
More like this
All navigation →- Pro
Collapsible Sidebar
Navigation · Refined Vertical Tabs
Navigation · RefinedPagination
Navigation · RefinedUnderline Tabs
Navigation · RefinedBreadcrumbs
Navigation · Refined- Pro
Nav Dropdown
Navigation · Refined