File Tree
Semantic files and collapsible directories for authored documentation.
Contract
TRFileTree converts an authored Markdown unordered list into a semantic file list. Nested lists become directories, while an item ending in / becomes an empty directory with a decorative placeholder. Directories use the platform details disclosure, open by default, and retain native pointer, Enter, and Space behavior.
Install
pnpm add @tinyrack/uiScroll inside the code area to read long lines.
Styles
@import '@tinyrack/ui/components/file-tree.css';Scroll inside the code area to read long lines.
Imports
import { TRFileTree } from '@tinyrack/ui/components/file-tree';Scroll inside the code area to read long lines.
Usage
Examples
Nest another Markdown list to create a directory. Paths remain files unless their final character is /. Inline Markdown, including links, strong text, and code, is preserved. Long paths wrap within narrow layouts.
API
TRFileTree has no component-specific scalar props. It forwards native ul props, including aria-label, className, style, event handlers, and React 19 ref; children supplies the authored unordered list. Provide an accessible name with aria-label when surrounding content does not already label the tree.
Customize presentation with --tr-file-tree-background, --tr-file-tree-border, --tr-file-tree-border-width, --tr-file-tree-color, --tr-file-tree-font-family, --tr-file-tree-font-size, --tr-file-tree-gap, --tr-file-tree-indent, --tr-file-tree-margin, --tr-file-tree-marker, --tr-file-tree-padding, --tr-file-tree-placeholder-color, and --tr-file-tree-radius. Each token falls back to the corresponding Tinyrack semantic token.