File tree

A file tree shows how files and folders are arranged. Use it to point readers to the right place in a project without making them guess.

Example

Click a folder to open or close it. Pass defaultOpen to a folder to show its contents on load.

Usage

<script>	import { Tree, Folder, File } from '$lib';</script><Tree>	<Folder name="src" defaultOpen>		<Folder name="content">			<File name="index.md" />		</Folder>		<File name="app.html" />	</Folder>	<File name="package.json" /></Tree>

Custom icons

By default folders use a folder glyph and files use a file glyph. Pass icon with any Lucide name to override either one.

Props

Folder

File