Tree: Indent guides

variant="lines" draws a guide for each level. The guide of the branch that holds the selected or focused row gets darker, so you can see where you are in deep trees.

packages

core

src

index.ts

store.ts

utils

clamp.ts

debounce.ts

package.json

react

turbo.json

import { IconFile, IconFolder, IconFolderOpen } from "@tabler/icons-react"

import { Tree, TreeGroup, TreeItem, TreeItemLabel } from "@/components/ui/tree"

type Node = { name: string; children?: Node[] }

const files: Node[] = [
  {
    name: "packages",
    children: [
      {
        name: "core",
        children: [
          {
            name: "src",
            children: [
              { name: "index.ts" },
              { name: "store.ts" },
              {
                name: "utils",
                children: [{ name: "clamp.ts" }, { name: "debounce.ts" }],
              },
            ],
          },
          { name: "package.json" },
        ],
      },
      {
        name: "react",
        children: [{ name: "index.tsx" }, { name: "package.json" }],
      },
    ],
  },
  { name: "turbo.json" },
]

function renderNodes(nodes: Node[], parent = ""): React.ReactNode {
  return nodes.map((node) => {
    const value = `${parent}/${node.name}`
    return node.children ? (
      <TreeItem key={value} value={value}>
        <TreeItemLabel icon={<IconFolder />} expandedIcon={<IconFolderOpen />}>
          {node.name}
        </TreeItemLabel>
        <TreeGroup>{renderNodes(node.children, value)}</TreeGroup>
      </TreeItem>
    ) : (
      <TreeItem key={value} value={value}>
        <TreeItemLabel icon={<IconFile />}>{node.name}</TreeItemLabel>
      </TreeItem>
    )
  })
}

export function TreeLines() {
  return (
    <Tree
      aria-label="Monorepo"
      variant="lines"
      defaultExpandedValues={[
        "/packages",
        "/packages/core",
        "/packages/core/src",
        "/packages/core/src/utils",
      ]}
      defaultSelectedValues={["/packages/core/src/utils/clamp.ts"]}
      className="w-full max-w-xs"
    >
      {renderNodes(files)}
    </Tree>
  )
}

Add this example

This adds the example as components/examples/tree/lines.tsx, together with the Tree component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/tree-lines.json

To add only the component, follow the Tree installation.

Props in this example

The Tree props this example sets, from the API reference.

Tree

Prop	Type	Default
`variant`	`"default" \| "lines" \| "connectors"`	`"default"`
`defaultSelectedValues`	`string[]`	`–`
`defaultExpandedValues`	`string[]`	`–`

TreeItem

Prop	Type	Default
`value`Required. Unique within the tree.	`string`	`–`

TreeItemLabel

Prop	Type	Default
`icon`Shown before the label.	`ReactNode`	`–`
`expandedIcon`Crossfades in for icon while the branch is open.	`ReactNode`	`–`

Every prop is in the Tree API reference.

More Tree examples

See them all, with keyboard support and accessibility notes, on the Tree page.