The TreeView component displays hierarchical data in an interactive, collapsible tree. Use it for file explorers, navigation structures, or any nested data.
The files variant displays a file-explorer style tree with folder and file icons.
src package.json tsconfig.json <TreeView variant="files"> <Folder name="src"> <Folder name="components"> <File name="Button.tsx" /> <File name="Card.tsx" /> </Folder> <File name="index.ts" /> </Folder> <File name="package.json" /> </TreeView> The simple variant uses dots instead of file/folder icons.
Getting Started Installation Configuration Quick Start Components <TreeView variant="simple"> <Folder name="Getting Started"> <File name="Installation" /> <File name="Configuration" /> </Folder> <Folder name="Components"> <File name="Button" /> <File name="Card" /> </Folder> </TreeView> The minimal variant shows only the text with indentation, no icons.
<TreeView variant="minimal"> <Folder name="Animals"> <Folder name="Mammals"> <File name="Dog" /> <File name="Cat" /> </Folder> <Folder name="Birds"> <File name="Eagle" /> </Folder> </Folder> </TreeView> Use the custom variant when you want to provide your own icons for folders and files. Pass React elements to the icon and openIcon props to fully control the visuals.
<TreeView variant="custom"> <Folder name="Cloud Suite" icon={<Icon icon="cloud" size={16} className="text-sky-500" />} openIcon={<Icon icon="cloud-rain" size={16} className="text-sky-500" />} > <File name="Compute" icon={<Icon icon="cpu" size={16} className="text-slate-500" />} /> <File name="Storage" icon={<Icon icon="database" size={16} className="text-amber-500" />} /> <File name="Networking" icon={<Icon icon="wifi" size={16} className="text-emerald-500" />} /> </Folder> <Folder name="Observability" icon={<Icon icon="activity" size={16} className="text-pink-500" />} > <File name="Logs" icon={<Icon icon="file-text" size={16} className="text-slate-500" />} /> <File name="Metrics" icon={<Icon icon="bar-chart-3" size={16} className="text-indigo-500" />} /> </Folder> </TreeView> Disable icons on any variant with showIcons={false}.
<TreeView variant="files" showIcons={false}> <Folder name="src"> <File name="index.ts" /> </Folder> </TreeView> Disable colored icons with coloredIcons={false}.
src App.tsx styles.css config.json <TreeView variant="files" coloredIcons={false}> <Folder name="src"> <File name="App.tsx" /> <File name="styles.css" /> </Folder> </TreeView> Use defaultOpen={false} to collapse all folders initially.
<TreeView defaultOpen={false}> <Folder name="app"> <Folder name="api"> <File name="route.ts" /> </Folder> <File name="page.tsx" /> </Folder> </TreeView> Override the default state on individual folders.
<TreeView defaultOpen={false}> <Folder name="src" defaultOpen={true}> <Folder name="components"> <File name="Button.tsx" /> </Folder> </Folder> <Folder name="public"> <File name="favicon.ico" /> </Folder> </TreeView> Use the active prop to highlight specific items.
src index.ts config.ts utils.ts <TreeView> <Folder name="src"> <File name="index.ts" /> <File name="config.ts" active /> <File name="utils.ts" /> </Folder> </TreeView> Visual style variant. Options: files (file explorer), simple (dot icons), minimal (no icons), custom (provide your own icons).
Default open state for all folders in the tree.
Whether to show icons. Only applies to files and custom variants.
Use colored icons based on file type. Only applies when showIcons is true.
Additional CSS classes for the container.
The folder/node name to display.
Override the tree's default open state for this folder.
Custom icon for the closed state when using the custom variant.
Optional icon for the open state in the custom variant. Falls back to icon when omitted.
The item/file name to display.
Whether this item is highlighted/active.
Override the auto-detected icon type. Provide a string to change the file coloring, or pass a React element when using the custom variant.