Tree

A hierarchical list component for displaying nested data structures.

<script setup lang="ts">
import { Tree, createTreeCollection } from '@destyler-ui/vue'
import TreeNode from './TreeNode.vue'

interface Node {
  id: string
  name: string
  children?: Node[]
}

const collection = createTreeCollection<Node>({
  nodeToValue: (node) => node.id,
  nodeToString: (node) => node.name,
  rootNode: {
    id: 'ROOT',
    name: '',
    children: [
      {
        id: 'node_modules',
        name: 'node_modules',
        children: [
          { id: 'node_modules/destyler', name: 'destyler' },
          { id: 'node_modules/unocss', name: 'unocss' },
          {
            id: 'node_modules/@types',
            name: '@types',
            children: [
              { id: 'node_modules/@types/react', name: 'react' },
              { id: 'node_modules/@types/react-dom', name: 'react-dom' },
            ],
          },
        ],
      },
      {
        id: 'src',
        name: 'src',
        children: [
          { id: 'src/app.tsx', name: 'app.tsx' },
          { id: 'src/index.ts', name: 'index.ts' },
        ],
      },
      { id: 'uno.config', name: 'uno.config.ts' },
      { id: 'package.json', name: 'package.json' },
      { id: 'renovate.json', name: 'renovate.json' },
      { id: 'readme.md', name: 'README.md' },
    ],
  },
})
</script>

<template>
  <Tree.Root :collection="collection">
    <Tree.Label>Tree</Tree.Label>
    <Tree.Tree>
      <TreeNode
        v-for="(node, index) in collection.rootNode.children"
        :key="node.id"
        :node="node"
        :indexPath="[index]"
      />
    </Tree.Tree>
  </Tree.Root>
</template>

import { createTreeCollection, Tree } from '@destyler-ui/react'
import { TreeNode } from './TreeNode'

interface Node {
  id: string
  name: string
  children?: Node[]
}

const collection = createTreeCollection<Node>({
  nodeToValue: node => node.id,
  nodeToString: node => node.name,
  rootNode: {
    id: 'ROOT',
    name: '',
    children: [
      {
        id: 'node_modules',
        name: 'node_modules',
        children: [
          { id: 'node_modules/destyler', name: 'destyler' },
          { id: 'node_modules/unocss', name: 'unocss' },
          {
            id: 'node_modules/@types',
            name: '@types',
            children: [
              { id: 'node_modules/@types/react', name: 'react' },
              { id: 'node_modules/@types/react-dom', name: 'react-dom' },
            ],
          },
        ],
      },
      {
        id: 'src',
        name: 'src',
        children: [
          { id: 'src/app.tsx', name: 'app.tsx' },
          { id: 'src/index.ts', name: 'index.ts' },
        ],
      },
      { id: 'uno.config', name: 'uno.config.ts' },
      { id: 'package.json', name: 'package.json' },
      { id: 'renovate.json', name: 'renovate.json' },
      { id: 'readme.md', name: 'README.md' },
    ],
  },
})

export function Basic() {
  return (
    <Tree.Root collection={collection}>
      <Tree.Label>Tree</Tree.Label>
      <Tree.Tree>
        {collection.rootNode.children?.map((node, index) => (
          <TreeNode
            key={node.id}
            node={node}
            indexPath={[index]}
          />
        ))}
      </Tree.Tree>
    </Tree.Root>
  )
}

import { createTreeCollection, Tree } from '@destyler-ui/solid/tree'
import { CheckSquareIcon, ChevronRightIcon, FileIcon, FolderIcon } from 'lucide-solid'
import { For, Show } from 'solid-js'

interface Node {
  id: string
  name: string
  children?: Node[]
}

const collection = createTreeCollection<Node>({
  nodeToValue: node => node.id,
  nodeToString: node => node.name,
  rootNode: {
    id: 'ROOT',
    name: '',
    children: [
      {
        id: 'node_modules',
        name: 'node_modules',
        children: [
          { id: 'node_modules/zag-js', name: 'zag-js' },
          { id: 'node_modules/pandacss', name: 'panda' },
          {
            id: 'node_modules/@types',
            name: '@types',
            children: [
              { id: 'node_modules/@types/react', name: 'react' },
              { id: 'node_modules/@types/react-dom', name: 'react-dom' },
            ],
          },
        ],
      },
      {
        id: 'src',
        name: 'src',
        children: [
          { id: 'src/app.tsx', name: 'app.tsx' },
          { id: 'src/index.ts', name: 'index.ts' },
        ],
      },
      { id: 'panda.config', name: 'panda.config.ts' },
      { id: 'package.json', name: 'package.json' },
      { id: 'renovate.json', name: 'renovate.json' },
      { id: 'readme.md', name: 'README.md' },
    ],
  },
})

export function Basic() {
  return (
    <Tree.Root collection={collection}>
      <Tree.Label>Tree</Tree.Label>
      <Tree.Tree>
        <For each={collection.rootNode.children}>
          {(node, index) => <TreeNode node={node} indexPath={[index()]} />}
        </For>
      </Tree.Tree>
    </Tree.Root>
  )
}

function TreeNode(props: Tree.NodeProviderProps<Node>) {
  const { node, indexPath } = props
  return (
    <Tree.NodeProvider node={node} indexPath={indexPath}>
      <Show
        when={node.children}
        fallback={(
          <Tree.Item>
            <Tree.ItemIndicator>
              <CheckSquareIcon />
            </Tree.ItemIndicator>
            <Tree.ItemText>
              <FileIcon />
              {node.name}
            </Tree.ItemText>
          </Tree.Item>
        )}
      >
        <Tree.Branch>
          <Tree.BranchControl>
            <Tree.BranchText>
              <FolderIcon /> {node.name}
            </Tree.BranchText>
            <Tree.BranchIndicator>
              <ChevronRightIcon />
            </Tree.BranchIndicator>
          </Tree.BranchControl>
          <Tree.BranchContent>
            <Tree.BranchIndentGuide />
            <For each={node.children}>
              {(child, index) => <TreeNode node={child} indexPath={[...indexPath, index()]} />}
            </For>
          </Tree.BranchContent>
        </Tree.Branch>
      </Show>
    </Tree.NodeProvider>
  )
}

<script lang="ts">
  import { Tree, createTreeCollection } from '@destyler-ui/svelte'
  import TreeNode from './TreeNode.svelte'

  interface Node {
    id: string
    name: string
    children?: Node[]
  }

  const collection = createTreeCollection<Node>({
    nodeToValue: (node) => node.id,
    nodeToString: (node) => node.name,
    rootNode: {
      id: 'ROOT',
      name: '',
      children: [
        {
          id: 'node_modules',
          name: 'node_modules',
          children: [
            { id: 'node_modules/destyler', name: 'destyler' },
            { id: 'node_modules/unocss', name: 'unocss' },
            {
              id: 'node_modules/@types',
              name: '@types',
              children: [
                { id: 'node_modules/@types/react', name: 'react' },
                { id: 'node_modules/@types/react-dom', name: 'react-dom' },
              ],
            },
          ],
        },
        {
          id: 'src',
          name: 'src',
          children: [
            { id: 'src/app.tsx', name: 'app.tsx' },
            { id: 'src/index.ts', name: 'index.ts' },
          ],
        },
        { id: 'uno.config', name: 'uno.config.ts' },
        { id: 'package.json', name: 'package.json' },
        { id: 'renovate.json', name: 'renovate.json' },
        { id: 'readme.md', name: 'README.md' },
      ],
    },
  })
</script>

<Tree.Root {collection}>
  <Tree.Label>Tree</Tree.Label>
  <Tree.Tree>
    {#each collection.rootNode.children ?? [] as node, index (node.id)}
      <TreeNode {node} indexPath={[index]} />
    {/each}
  </Tree.Tree>
</Tree.Root>

Anatomy

<script setup lang="ts">
import { Tree } from '@destyler-ui/vue'
</script>

<template>
  <Tree.Root>
    <Tree.Label />
    <Tree.Tree>
      <Tree.Item>
        <Tree.ItemIndicator />
        <Tree.ItemText />
      </Tree.Item>
      <Tree.Branch>
        <Tree.BranchControl>
          <Tree.BranchTrigger />
          <Tree.BranchText />
          <Tree.BranchIndicator />
        </Tree.BranchControl>
        <Tree.BranchContent>
          <Tree.BranchIndentGuide />
          <Tree.Item>
            <Tree.ItemText />
          </Tree.Item>
        </Tree.BranchContent>
      </Tree.Branch>
    </Tree.Tree>
  </Tree.Root>
</template>

import { Tree } from '@destyler-ui/react'

export default function Basic() {
  return (
    <Tree.Root>
      <Tree.Label />
      <Tree.Tree>
        <Tree.Item>
          <Tree.ItemIndicator />
          <Tree.ItemText />
        </Tree.Item>
        <Tree.Branch>
          <Tree.BranchControl>
            <Tree.BranchTrigger />
            <Tree.BranchText />
            <Tree.BranchIndicator />
          </Tree.BranchControl>
          <Tree.BranchContent>
            <Tree.BranchIndentGuide />
            <Tree.Item>
              <Tree.ItemText />
            </Tree.Item>
          </Tree.BranchContent>
        </Tree.Branch>
      </Tree.Tree>
    </Tree.Root>
  )
}

import { createTreeCollection, Tree } from '@destyler-ui/solid'
import { For, Show } from 'solid-js'

interface Node {
  id: string
  name: string
  children?: Node[]
}

const collection = createTreeCollection<Node>({
  nodeToValue: node => node.id,
  nodeToString: node => node.name,
  rootNode: {
    id: 'root',
    name: '',
    children: [
      {
        id: 'src',
        name: 'src',
        children: [{ id: 'src/index.ts', name: 'index.ts' }],
      },
      { id: 'package.json', name: 'package.json' },
    ],
  },
})

export default function Basic() {
  return (
    <Tree.Root collection={collection}>
      <Tree.Label>Files</Tree.Label>
      <Tree.Tree>
        <For each={collection.rootNode.children}>
          {(node, index) => <TreeNode node={node} indexPath={[index()]} />}
        </For>
      </Tree.Tree>
    </Tree.Root>
  )
}

function TreeNode(props: Tree.NodeProviderProps<Node>) {
  return (
    <Tree.NodeProvider node={props.node} indexPath={props.indexPath}>
      <Show
        when={props.node.children}
        fallback={(
          <Tree.Item>
            <Tree.ItemText>{props.node.name}</Tree.ItemText>
          </Tree.Item>
        )}
      >
        <Tree.Branch>
          <Tree.BranchControl>
            <Tree.BranchTrigger />
            <Tree.BranchText>{props.node.name}</Tree.BranchText>
            <Tree.BranchIndicator />
          </Tree.BranchControl>
          <Tree.BranchContent>
            <Tree.BranchIndentGuide />
            <For each={props.node.children}>
              {(child, index) => (
                <TreeNode node={child} indexPath={[...props.indexPath, index()]} />
              )}
            </For>
          </Tree.BranchContent>
        </Tree.Branch>
      </Show>
    </Tree.NodeProvider>
  )
}

<script lang="ts">
  import { Tree, createTreeCollection } from '@destyler-ui/svelte'

  interface Node {
    id: string
    name: string
    children?: Node[]
  }

  const collection = createTreeCollection<Node>({
    nodeToValue: (node) => node.id,
    nodeToString: (node) => node.name,
    rootNode: {
      id: 'ROOT',
      name: '',
      children: [
        {
          id: 'src',
          name: 'src',
          children: [
            { id: 'src/app.svelte', name: 'app.svelte' },
            { id: 'src/index.ts', name: 'index.ts' },
          ],
        },
        { id: 'package.json', name: 'package.json' },
      ],
    },
  })
</script>

{#snippet renderNode(node: Node, indexPath: number[])}
  <Tree.NodeProvider {node} {indexPath}>
    {#if node.children}
      <Tree.Branch>
        <Tree.BranchControl>
          <Tree.BranchTrigger>
            <Tree.BranchText>{node.name}</Tree.BranchText>
            <Tree.BranchIndicator>▶</Tree.BranchIndicator>
          </Tree.BranchTrigger>
        </Tree.BranchControl>
        <Tree.BranchContent>
          <Tree.BranchIndentGuide />
          {#each node.children as child, index (child.id)}
            {@render renderNode(child, [...indexPath, index])}
          {/each}
        </Tree.BranchContent>
      </Tree.Branch>
    {:else}
      <Tree.Item>
        <Tree.ItemIndicator>•</Tree.ItemIndicator>
        <Tree.ItemText>{node.name}</Tree.ItemText>
      </Tree.Item>
    {/if}
  </Tree.NodeProvider>
{/snippet}

<Tree.Root {collection}>
  <Tree.Label>Tree</Tree.Label>
  <Tree.Tree>
    {#each collection.rootNode.children ?? [] as node, index (node.id)}
      {@render renderNode(node, [index])}
    {/each}
  </Tree.Tree>
</Tree.Root>

Examples

Basic

<script setup lang="ts">
import { Tree, createTreeCollection } from '@destyler-ui/vue'
import TreeNode from './TreeNode.vue'

interface Node {
  id: string
  name: string
  children?: Node[]
}

const collection = createTreeCollection<Node>({
  nodeToValue: (node) => node.id,
  nodeToString: (node) => node.name,
  rootNode: {
    id: 'ROOT',
    name: '',
    children: [
      {
        id: 'node_modules',
        name: 'node_modules',
        children: [
          { id: 'node_modules/destyler', name: 'destyler' },
          { id: 'node_modules/unocss', name: 'unocss' },
          {
            id: 'node_modules/@types',
            name: '@types',
            children: [
              { id: 'node_modules/@types/react', name: 'react' },
              { id: 'node_modules/@types/react-dom', name: 'react-dom' },
            ],
          },
        ],
      },
      {
        id: 'src',
        name: 'src',
        children: [
          { id: 'src/app.tsx', name: 'app.tsx' },
          { id: 'src/index.ts', name: 'index.ts' },
        ],
      },
      { id: 'uno.config', name: 'uno.config.ts' },
      { id: 'package.json', name: 'package.json' },
      { id: 'renovate.json', name: 'renovate.json' },
      { id: 'readme.md', name: 'README.md' },
    ],
  },
})
</script>

<template>
  <Tree.Root :collection="collection">
    <Tree.Label>Tree</Tree.Label>
    <Tree.Tree>
      <TreeNode
        v-for="(node, index) in collection.rootNode.children"
        :key="node.id"
        :node="node"
        :indexPath="[index]"
      />
    </Tree.Tree>
  </Tree.Root>
</template>

import { createTreeCollection, Tree } from '@destyler-ui/react'
import { TreeNode } from './TreeNode'

interface Node {
  id: string
  name: string
  children?: Node[]
}

const collection = createTreeCollection<Node>({
  nodeToValue: node => node.id,
  nodeToString: node => node.name,
  rootNode: {
    id: 'ROOT',
    name: '',
    children: [
      {
        id: 'node_modules',
        name: 'node_modules',
        children: [
          { id: 'node_modules/destyler', name: 'destyler' },
          { id: 'node_modules/unocss', name: 'unocss' },
          {
            id: 'node_modules/@types',
            name: '@types',
            children: [
              { id: 'node_modules/@types/react', name: 'react' },
              { id: 'node_modules/@types/react-dom', name: 'react-dom' },
            ],
          },
        ],
      },
      {
        id: 'src',
        name: 'src',
        children: [
          { id: 'src/app.tsx', name: 'app.tsx' },
          { id: 'src/index.ts', name: 'index.ts' },
        ],
      },
      { id: 'uno.config', name: 'uno.config.ts' },
      { id: 'package.json', name: 'package.json' },
      { id: 'renovate.json', name: 'renovate.json' },
      { id: 'readme.md', name: 'README.md' },
    ],
  },
})

export function Basic() {
  return (
    <Tree.Root collection={collection}>
      <Tree.Label>Tree</Tree.Label>
      <Tree.Tree>
        {collection.rootNode.children?.map((node, index) => (
          <TreeNode
            key={node.id}
            node={node}
            indexPath={[index]}
          />
        ))}
      </Tree.Tree>
    </Tree.Root>
  )
}

import { createTreeCollection, Tree } from '@destyler-ui/solid/tree'
import { CheckSquareIcon, ChevronRightIcon, FileIcon, FolderIcon } from 'lucide-solid'
import { For, Show } from 'solid-js'

interface Node {
  id: string
  name: string
  children?: Node[]
}

const collection = createTreeCollection<Node>({
  nodeToValue: node => node.id,
  nodeToString: node => node.name,
  rootNode: {
    id: 'ROOT',
    name: '',
    children: [
      {
        id: 'node_modules',
        name: 'node_modules',
        children: [
          { id: 'node_modules/zag-js', name: 'zag-js' },
          { id: 'node_modules/pandacss', name: 'panda' },
          {
            id: 'node_modules/@types',
            name: '@types',
            children: [
              { id: 'node_modules/@types/react', name: 'react' },
              { id: 'node_modules/@types/react-dom', name: 'react-dom' },
            ],
          },
        ],
      },
      {
        id: 'src',
        name: 'src',
        children: [
          { id: 'src/app.tsx', name: 'app.tsx' },
          { id: 'src/index.ts', name: 'index.ts' },
        ],
      },
      { id: 'panda.config', name: 'panda.config.ts' },
      { id: 'package.json', name: 'package.json' },
      { id: 'renovate.json', name: 'renovate.json' },
      { id: 'readme.md', name: 'README.md' },
    ],
  },
})

export function Basic() {
  return (
    <Tree.Root collection={collection}>
      <Tree.Label>Tree</Tree.Label>
      <Tree.Tree>
        <For each={collection.rootNode.children}>
          {(node, index) => <TreeNode node={node} indexPath={[index()]} />}
        </For>
      </Tree.Tree>
    </Tree.Root>
  )
}

function TreeNode(props: Tree.NodeProviderProps<Node>) {
  const { node, indexPath } = props
  return (
    <Tree.NodeProvider node={node} indexPath={indexPath}>
      <Show
        when={node.children}
        fallback={(
          <Tree.Item>
            <Tree.ItemIndicator>
              <CheckSquareIcon />
            </Tree.ItemIndicator>
            <Tree.ItemText>
              <FileIcon />
              {node.name}
            </Tree.ItemText>
          </Tree.Item>
        )}
      >
        <Tree.Branch>
          <Tree.BranchControl>
            <Tree.BranchText>
              <FolderIcon /> {node.name}
            </Tree.BranchText>
            <Tree.BranchIndicator>
              <ChevronRightIcon />
            </Tree.BranchIndicator>
          </Tree.BranchControl>
          <Tree.BranchContent>
            <Tree.BranchIndentGuide />
            <For each={node.children}>
              {(child, index) => <TreeNode node={child} indexPath={[...indexPath, index()]} />}
            </For>
          </Tree.BranchContent>
        </Tree.Branch>
      </Show>
    </Tree.NodeProvider>
  )
}

<script lang="ts">
  import { Tree, createTreeCollection } from '@destyler-ui/svelte'
  import TreeNode from './TreeNode.svelte'

  interface Node {
    id: string
    name: string
    children?: Node[]
  }

  const collection = createTreeCollection<Node>({
    nodeToValue: (node) => node.id,
    nodeToString: (node) => node.name,
    rootNode: {
      id: 'ROOT',
      name: '',
      children: [
        {
          id: 'node_modules',
          name: 'node_modules',
          children: [
            { id: 'node_modules/destyler', name: 'destyler' },
            { id: 'node_modules/unocss', name: 'unocss' },
            {
              id: 'node_modules/@types',
              name: '@types',
              children: [
                { id: 'node_modules/@types/react', name: 'react' },
                { id: 'node_modules/@types/react-dom', name: 'react-dom' },
              ],
            },
          ],
        },
        {
          id: 'src',
          name: 'src',
          children: [
            { id: 'src/app.tsx', name: 'app.tsx' },
            { id: 'src/index.ts', name: 'index.ts' },
          ],
        },
        { id: 'uno.config', name: 'uno.config.ts' },
        { id: 'package.json', name: 'package.json' },
        { id: 'renovate.json', name: 'renovate.json' },
        { id: 'readme.md', name: 'README.md' },
      ],
    },
  })
</script>

<Tree.Root {collection}>
  <Tree.Label>Tree</Tree.Label>
  <Tree.Tree>
    {#each collection.rootNode.children ?? [] as node, index (node.id)}
      <TreeNode {node} indexPath={[index]} />
    {/each}
  </Tree.Tree>
</Tree.Root>

Tree Node

Use a recursive tree node pattern for dynamic data.

<script setup lang="ts">
import { Tree } from '@destyler-ui/vue'

interface Node {
  id: string
  name: string
  children?: Node[]
}

interface Props {
  node: Node
  indexPath: number[]
}

defineProps<Props>()
</script>

<template>
  <Tree.NodeProvider :node="node" :indexPath="indexPath">
    <template v-if="node.children">
      <Tree.Branch>
        <Tree.BranchControl>
          <Tree.BranchTrigger>
            <Tree.BranchText>
              {{ node.name }}
            </Tree.BranchText>
            <Tree.BranchIndicator>
              ▶
            </Tree.BranchIndicator>
          </Tree.BranchTrigger>
        </Tree.BranchControl>
        <Tree.BranchContent>
          <Tree.BranchIndentGuide />
          <TreeNode
            v-for="(child, index) in node.children"
            :key="child.id"
            :node="child"
            :indexPath="[...indexPath, index]"
          />
        </Tree.BranchContent>
      </Tree.Branch>
    </template>
    <template v-else>
      <Tree.Item>
        <Tree.ItemIndicator>
          •
        </Tree.ItemIndicator>
        <Tree.ItemText>
          {{ node.name }}
        </Tree.ItemText>
      </Tree.Item>
    </template>
  </Tree.NodeProvider>
</template>

import { Tree } from '@destyler-ui/react'

interface Node {
  id: string
  name: string
  children?: Node[]
}

interface TreeNodeProps {
  node: Node
  indexPath: number[]
}

export function TreeNode({ node, indexPath }: TreeNodeProps) {
  if (node.children) {
    return (
      <Tree.NodeProvider node={node} indexPath={indexPath}>
        <Tree.Branch>
          <Tree.BranchControl>
            <Tree.BranchTrigger>
              <Tree.BranchText>
                {node.name}
              </Tree.BranchText>
              <Tree.BranchIndicator>
                ▶
              </Tree.BranchIndicator>
            </Tree.BranchTrigger>
          </Tree.BranchControl>
          <Tree.BranchContent>
            <Tree.BranchIndentGuide />
            {node.children.map((child, index) => (
              <TreeNode
                key={child.id}
                node={child}
                indexPath={[...indexPath, index]}
              />
            ))}
          </Tree.BranchContent>
        </Tree.Branch>
      </Tree.NodeProvider>
    )
  }

  return (
    <Tree.NodeProvider node={node} indexPath={indexPath}>
      <Tree.Item>
        <Tree.ItemIndicator>
          •
        </Tree.ItemIndicator>
        <Tree.ItemText>
          {node.name}
        </Tree.ItemText>
      </Tree.Item>
    </Tree.NodeProvider>
  )
}

import { Tree } from '@destyler-ui/solid/tree'
import { For, Show } from 'solid-js'

interface Node {
  id: string
  name: string
  children?: Node[]
}

interface TreeNodeProps {
  node: Node
  indexPath: number[]
}

export function TreeNode(props: TreeNodeProps) {
  return (
    <Tree.NodeProvider node={props.node} indexPath={props.indexPath}>
      <Show
        when={props.node.children}
        fallback={(
          <Tree.Item>
            <Tree.ItemIndicator>•</Tree.ItemIndicator>
            <Tree.ItemText>{props.node.name}</Tree.ItemText>
          </Tree.Item>
        )}
      >
        <Tree.Branch>
          <Tree.BranchControl>
            <Tree.BranchTrigger>
              <Tree.BranchText>{props.node.name}</Tree.BranchText>
              <Tree.BranchIndicator>▶</Tree.BranchIndicator>
            </Tree.BranchTrigger>
          </Tree.BranchControl>
          <Tree.BranchContent>
            <Tree.BranchIndentGuide />
            <For each={props.node.children}>
              {(child, index) => (
                <TreeNode node={child} indexPath={[...props.indexPath, index()]} />
              )}
            </For>
          </Tree.BranchContent>
        </Tree.Branch>
      </Show>
    </Tree.NodeProvider>
  )
}

<script lang="ts">
  import { Tree } from '@destyler-ui/svelte'

  interface Node {
    id: string
    name: string
    children?: Node[]
  }

  let { node, indexPath }: { node: Node; indexPath: number[] } = $props()
</script>

{#snippet renderNode(currentNode: Node, currentIndexPath: number[])}
  <Tree.NodeProvider node={currentNode} indexPath={currentIndexPath}>
    {#if currentNode.children}
      <Tree.Branch>
        <Tree.BranchControl>
          <Tree.BranchTrigger>
            <Tree.BranchText>{currentNode.name}</Tree.BranchText>
            <Tree.BranchIndicator>▶</Tree.BranchIndicator>
          </Tree.BranchTrigger>
        </Tree.BranchControl>
        <Tree.BranchContent>
          <Tree.BranchIndentGuide />
          {#each currentNode.children as child, index (child.id)}
            {@render renderNode(child, [...currentIndexPath, index])}
          {/each}
        </Tree.BranchContent>
      </Tree.Branch>
    {:else}
      <Tree.Item>
        <Tree.ItemIndicator>•</Tree.ItemIndicator>
        <Tree.ItemText>{currentNode.name}</Tree.ItemText>
      </Tree.Item>
    {/if}
  </Tree.NodeProvider>
{/snippet}

{@render renderNode(node, indexPath)}

API Reference

Root

Prop	Default	Type
`collection*`	—	`TreeCollection<T>` The collection of tree nodes
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.
`defaultExpandedValue`	—	`string[]` The initial expanded items of the tree view. Use this when you do not need to control the state of the tree view.
`defaultSelectedValue`	—	`string[]` The initial selected items of the tree view. Use this when you do not need to control the state of the tree view.
`expandedValue`	—	`string[]` The id of the expanded nodes
`expandOnClick`	`true`	`false \| true` Whether clicking on a branch should open it or not
`focusedValue`	—	`string` The id of the focused node
`id`	—	`string` The unique identifier of the machine.
`ids`	—	`Partial<{ root: string; tree: string; label: string; node: (value: string) => string; }>` The ids of the tree elements. Useful for composition.
`lazyMount`	`false`	`false \| true` Whether to enable lazy mounting
`selectedValue`	—	`string[]` The id of the selected nodes
`selectionMode`	`"single"`	`"single" \| "multiple"` Whether the tree supports multiple selection - "single": only one node can be selected - "multiple": multiple nodes can be selected
`typeahead`	`true`	`false \| true` Whether the tree supports typeahead search
`unmountOnExit`	`false`	`false \| true` Whether to unmount on exit.

Emit	Event
`expandedChange`	`[details: ExpandedChangeDetails]` Called when the tree is opened or closed
`focusChange`	`[details: FocusChangeDetails]` Called when the focused node changes
`selectionChange`	`[details: SelectionChangeDetails]` Called when the selection changes
`update:expandedValue`	`[value: string[]]`
`update:focusedValue`	`[value: string \| null]`
`update:selectedValue`	`[value: string[]]`

Branch

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

BranchContent

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

BranchControl

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

BranchIndentGuide

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

BranchIndicator

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

BranchText

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

BranchTrigger

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Context

No serializable props or emits are declared for this part.

Item

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

ItemIndicator

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

ItemText

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Label

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

NodeContext

No serializable props or emits are declared for this part.

NodeProvider

Prop	Default	Type
`indexPath*`	—	`number[]` The index path of the tree node
`node*`	—	`T` The tree node

RootProvider

Prop	Default	Type
`value*`	—	`MachineApi<PropTypes, T>`
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.
`lazyMount`	`false`	`false \| true` Whether to enable lazy mounting
`unmountOnExit`	`false`	`false \| true` Whether to unmount on exit.

Tree

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Root

Prop	Default	Type
`collection*`	—	`TreeCollection<T>` The collection of tree nodes
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.
`defaultExpandedValue`	—	`string[]` The initial expanded items of the tree. Use this when you do not need to control the state of the tree.
`defaultSelectedValue`	—	`string[]` The initial selected items of the tree. Use this when you do not need to control the state of the tree.
`expandedValue`	—	`string[]` The id of the expanded nodes
`expandOnClick`	`true`	`false \| true` Whether clicking on a branch should open it or not
`focusedValue`	—	`null \| string` The id of the focused node
`ids`	—	`Partial<{ root: string; tree: string; label: string; node: (value: string) => string; }>` The ids of the tree elements. Useful for composition.
`lazyMount`	`false`	`false \| true` Whether to enable lazy mounting
`onExpandedChange`	—	`(details: ExpandedChangeDetails) => void` Called when the tree is opened or closed
`onFocusChange`	—	`(details: FocusChangeDetails) => void` Called when the focused node changes
`onSelectionChange`	—	`(details: SelectionChangeDetails) => void` Called when the selection changes
`selectedValue`	—	`string[]` The id of the selected nodes
`selectionMode`	`"single"`	`"multiple" \| "single"` Whether the tree supports multiple selection - "single": only one node can be selected - "multiple": multiple nodes can be selected
`typeahead`	`true`	`false \| true` Whether the tree supports typeahead search
`unmountOnExit`	`false`	`false \| true` Whether to unmount on exit.

Branch

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

BranchContent

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

BranchControl

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

BranchIndentGuide

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

BranchIndicator

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

BranchText

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

BranchTrigger

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Context

Prop	Default	Type
`children*`	—	`(context: UseTreeContext<T>) => ReactNode`

Item

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

ItemIndicator

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

ItemText

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Label

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

NodeContext

Prop	Default	Type
`children*`	—	`(context: UseTreeNodeContext) => ReactNode`

NodeProvider

Prop	Default	Type
`indexPath*`	—	`number[]` The index path of the tree node
`node*`	—	`T` The tree node
`children`	—	`null \| string \| number \| bigint \| false \| true \| react82.ReactElement<unknown, string \| react82.JSXElementConstructor<any>> \| Iterable<react82.ReactNode> \| react82.ReactPortal \| Promise<string \| number \| bigint \| boolean \| react82.ReactPortal \| react82.ReactElement<unknown, string \| react82.JSXElementConstructor<any>> \| Iterable<react82.ReactNode> \| null \| undefined>`

RootProvider

Prop	Default	Type
`value*`	—	`UseTreeReturn<T>`
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.
`lazyMount`	`false`	`false \| true` Whether to enable lazy mounting
`unmountOnExit`	`false`	`false \| true` Whether to unmount on exit.

Tree

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Root

Prop	Default	Type
`collection*`	—	`TreeCollection<T>` The collection of tree nodes
`asChild`	—	`(props: (userProps?: solid_js352.JSX.HTMLAttributes<HTMLDivElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.
`defaultExpandedValue`	—	`string[]` The initial expanded items of the tree view. Use this when you do not need to control the state of the tree view.
`defaultSelectedValue`	—	`string[]` The initial selected items of the tree view. Use this when you do not need to control the state of the tree view.
`expandedValue`	—	`string[]` The id of the expanded nodes
`expandOnClick`	`true`	`false \| true` Whether clicking on a branch should open it or not
`focusedValue`	—	`null \| string` The id of the focused node
`id`	—	`string` The unique identifier of the machine.
`ids`	—	`Partial<{ root: string; tree: string; label: string; node: (value: string) => string; }>` The ids of the tree elements. Useful for composition.
`lazyMount`	`false`	`false \| true` Whether to enable lazy mounting
`onExpandedChange`	—	`(details: ExpandedChangeDetails) => void` Called when the tree is opened or closed
`onFocusChange`	—	`(details: FocusChangeDetails) => void` Called when the focused node changes
`onSelectionChange`	—	`(details: SelectionChangeDetails) => void` Called when the selection changes
`selectedValue`	—	`string[]` The id of the selected nodes
`selectionMode`	`"single"`	`"single" \| "multiple"` Whether the tree supports multiple selection - "single": only one node can be selected - "multiple": multiple nodes can be selected
`typeahead`	`true`	`false \| true` Whether the tree supports typeahead search
`unmountOnExit`	`false`	`false \| true` Whether to unmount on exit.

Branch

Prop	Default	Type
`asChild`	—	`(props: (userProps?: solid_js352.JSX.HTMLAttributes<HTMLDivElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

BranchContent

Prop	Default	Type
`asChild`	—	`(props: (userProps?: solid_js352.JSX.HTMLAttributes<HTMLDivElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

BranchControl

Prop	Default	Type
`asChild`	—	`(props: (userProps?: solid_js352.JSX.HTMLAttributes<HTMLDivElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

BranchIndentGuide

Prop	Default	Type
`asChild`	—	`(props: (userProps?: solid_js352.JSX.HTMLAttributes<HTMLDivElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

BranchIndicator

Prop	Default	Type
`asChild`	—	`(props: (userProps?: solid_js352.JSX.HTMLAttributes<HTMLDivElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

BranchText

Prop	Default	Type
`asChild`	—	`(props: (userProps?: solid_js352.JSX.HTMLAttributes<HTMLSpanElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

BranchTrigger

Prop	Default	Type
`asChild`	—	`(props: (userProps?: solid_js352.JSX.HTMLAttributes<HTMLDivElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

Context

Prop	Default	Type
`children*`	—	`(context: UseTreeContext<T>) => Element`

Item

Prop	Default	Type
`asChild`	—	`(props: (userProps?: solid_js352.JSX.HTMLAttributes<HTMLDivElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

ItemIndicator

Prop	Default	Type
`asChild`	—	`(props: (userProps?: solid_js352.JSX.HTMLAttributes<HTMLDivElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

ItemText

Prop	Default	Type
`asChild`	—	`(props: (userProps?: solid_js352.JSX.HTMLAttributes<HTMLSpanElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

Label

Prop	Default	Type
`asChild`	—	`(props: (userProps?: solid_js352.JSX.LabelHTMLAttributes<HTMLLabelElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

NodeContext

Prop	Default	Type
`children*`	—	`(context: UseTreeNodeContext) => Element`

NodeProvider

Prop	Default	Type
`indexPath*`	—	`number[]` The index path of the tree node
`node*`	—	`T` The tree node
`children`	—	`null \| number \| false \| true \| Node \| solid_js352.JSX.ArrayElement \| (string & {})`

RootProvider

Prop	Default	Type
`value*`	—	`UseTreeReturn<T>`
`asChild`	—	`(props: (userProps?: solid_js352.JSX.HTMLAttributes<HTMLDivElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.
`lazyMount`	`false`	`false \| true` Whether to enable lazy mounting
`unmountOnExit`	`false`	`false \| true` Whether to unmount on exit.

Tree

Prop	Default	Type
`asChild`	—	`(props: (userProps?: solid_js352.JSX.HTMLAttributes<HTMLDivElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

Root

Prop	Default	Type
`collection*`	—	`TreeCollection<T>`
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>`
`children`	—	`Snippet<[]> \| undefined`
`defaultExpandedValue`	—	`string[]`
`defaultSelectedValue`	—	`string[]`
`expandedValue`	—	`string[]` The id of the expanded nodes
`expandOnClick`	`true`	`false \| true` Whether clicking on a branch should open it or not
`focusedValue`	—	`null \| string` The id of the focused node
`id`	—	`string` A stable id for the tree. Svelte hooks cannot call `$props.id()`. Components should pass the id generated at the component's top level; `Tree.Root` does this automatically.
`ids`	—	`Partial<{ root: string; tree: string; label: string; node: (value: string) => string; }>` The ids of the tree elements. Useful for composition.
`lazyMount`	`false`	`false \| true` Whether to enable lazy mounting
`onExpandedChange`	—	`(details: import("/home/runner/work/ui/ui/packages/svelte/dist/index").TreeExpandedChangeDetails) => void` Called when the tree is opened or closed
`onFocusChange`	—	`(details: import("/home/runner/work/ui/ui/packages/svelte/dist/index").TreeFocusChangeDetails) => void` Called when the focused node changes
`onSelectionChange`	—	`(details: import("/home/runner/work/ui/ui/packages/svelte/dist/index").TreeSelectionChangeDetails) => void` Called when the selection changes
`selectedValue`	—	`string[]` The id of the selected nodes
`selectionMode`	`"single"`	`"multiple" \| "single"` Whether the tree supports multiple selection - "single": only one node can be selected - "multiple": multiple nodes can be selected
`typeahead`	`true`	`false \| true` Whether the tree supports typeahead search
`unmountOnExit`	`false`	`false \| true` Whether to unmount on exit.

Branch

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"li">]>`
`children`	—	`Snippet<[]> \| undefined`

BranchContent

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"ul">]>`
`children`	—	`Snippet<[]> \| undefined`

BranchControl

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>`
`children`	—	`Snippet<[]> \| undefined`

BranchIndentGuide

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>`
`children`	—	`Snippet<[]> \| undefined`

BranchIndicator

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>`
`children`	—	`Snippet<[]> \| undefined`

BranchText

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"span">]>`
`children`	—	`Snippet<[]> \| undefined`

BranchTrigger

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"button">]>`
`children`	—	`Snippet<[]> \| undefined`

Context

Prop	Default	Type
`render*`	—	`Snippet<[UseTreeContext<any>]>`

Item

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"li">]>`
`children`	—	`Snippet<[]> \| undefined`

ItemIndicator

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>`
`children`	—	`Snippet<[]> \| undefined`

ItemText

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"span">]>`
`children`	—	`Snippet<[]> \| undefined`

Label

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"h3">]>`
`children`	—	`Snippet<[]> \| undefined`

NodeContext

Prop	Default	Type
`render*`	—	`Snippet<[UseTreeNodeContext]>`

NodeProvider

Prop	Default	Type
`indexPath*`	—	`number[]`
`node*`	—	`T`
`children`	—	`Snippet<[]> \| undefined`

RootProvider

Prop	Default	Type
`value*`	—	`UseTreeReturn<T>`
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>`
`children`	—	`Snippet<[]> \| undefined`
`lazyMount`	`false`	`false \| true` Whether to enable lazy mounting
`unmountOnExit`	`false`	`false \| true` Whether to unmount on exit.

Tree

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"ul">]>`
`children`	—	`Snippet<[]> \| undefined`