File Tree

An interactive file tree component with expandable folders, selectable files, and smooth animations.

motion-sv

Installation

pnpm dlx shadcn-svelte@latest add https://sv-animations.vercel.app/r/file-tree.json

The root tree container component.

Name	Type	Default	Description
`initialSelectedId`	`string`	`undefined`	`Initial selected item ID`
`initialExpandedItems`	`string[]`	`[]`	`Initial expanded items`
`elements`	`TreeViewElement[]`	`undefined`	`Tree elements data`
`indicator`	`boolean`	`true`	`Show indicator line`
`dir`	`'rtl' \| 'ltr'`	`'ltr'`	`Text direction`
`class`	`string`	`""`	`Additional CSS classes`

A folder component that can contain files and other folders.

Name	Type	Default	Description
`element`	`string`	`required`	`Folder name/label`
`value`	`string`	`required`	`Unique value for this folder`
`isSelectable`	`boolean`	`true`	`Whether the folder is selectable`
`class`	`string`	`""`	`Additional CSS classes`

A file component that can be selected.

Name	Type	Default	Description
`value`	`string`	`required`	`Unique value for this file`
`isSelectable`	`boolean`	`true`	`Whether the file is selectable`
`class`	`string`	`""`	`Additional CSS classes`

A button to expand or collapse all folders.

Name	Type	Default	Description
`elements`	`TreeViewElement[]`	`required`	`Tree elements to expand/collapse`
`expandAll`	`boolean`	`false`	`Whether to expand all on mount`
`class`	`string`	`""`	`Additional CSS classes`