File Tree

kai-file-tree

Pass a flat array of paths and get a collapsible, keyboard-navigable file explorer — folders are derived from the slashes automatically, no tree to build by hand.

• Shadow DOM
• ARIA tree / treeitem
• 1 event
• Derived folder structure
• Fills its container

Preview

When to use

Reach for <kai-file-tree> for a sidebar-style file explorer — inside <kai-artifact>’s Code tab, a <kai-resizable> panel, or any file-picker surface. It fills its container, so give the parent an explicit height (e.g. height: 320px).

Usage

Set files in JavaScript (it’s an array, so it can’t be an attribute):

<kai-file-tree style="display:block;height:320px"></kai-file-tree>
<script type="module">
  import '@kitn.ai/ui/elements';
  const tree = document.querySelector('kai-file-tree');
  tree.files = [
    { path: 'index.html', type: 'html' },
    { path: 'src/app.ts', type: 'other' },
    { path: 'src/lib/format.ts', type: 'other' },
    { path: 'assets/logo.svg', type: 'image' },
  ];
  tree.setAttribute('active-file', 'src/app.ts');
  tree.addEventListener('kai-select', (e) => console.log('selected', e.detail.path));
</script>

• Folders are derived — any / in a path creates intermediate folder nodes; no explicit folder entries needed.
• active-file — plain attribute; update it in response to kai-select to keep selection in sync.
• defaultExpanded — assign it in JavaScript (el.defaultExpanded = ['src']). Omit to start all folders open; pass an array to restrict which start expanded.
• Keyboard — proper ARIA tree: arrow keys move focus, Enter/Space selects or toggles, Home/End jump to first/last row.

Examples

Default Tree

A mixed project with HTML, TypeScript, CSS, images, and a PDF. src/app.ts starts highlighted via active-file.

Code

Deeply Nested Layout

Multiple levels of nesting across src/components, src/hooks, and docs.

Code

Mixed File Types

A design system asset bundle covering SVG images, PDFs, HTML preview, JSON tokens, and CSS.

Code

Controlled Expansion

Only src starts open — tests, src/routes, and src/middleware start collapsed.

Code

Props

Property	Type	Default	Notes
files	FileTreeFile[]	[]	The files to render. Set as a JS property (array of `{ path, url?, code?, language?, type? }`).
activeFile	string	—	Selected file path — highlighted in the tree.
defaultExpanded	string[]	—	Folder paths expanded initially. Omit to start with all folders open.

Events

Event	Detail	Notes
kai-select	{ … }	Fired when a file is selected. `detail.path` = the file's path.

Composed from

This element wraps these SolidJS components — reach for them directly when you need finer control than the props expose.

FileTree

---

Need a hand? Report a bug Ask for help