🚧 This documentation is a work in progress. Coming from @studs/react? See our Migration Guide.

Tree

The main Tree component that renders a hierarchical tree structure.

This component serves as the container for tree items and manages the overall tree display. It accepts tree data and configuration options, then renders TreeNode components for each top-level item.

Example

"use client"

import { Tree } from "@strongtie/design-system/tree"

const treeData = [
  {
    id: "1",
    name: "src",
    type: "folder" as const,
    children: [
      {
        id: "2",
        name: "components",
        type: "folder" as const,
        children: [
          {
            id: "3",
            name: "Button.tsx",
            type: "file" as const,
          },
          {
            id: "4",
            name: "Input.tsx",
            type: "file" as const,
          },
          {
            id: "5",
            name: "Card.tsx",
            type: "file" as const,
          },
        ],
      },
      {
        id: "6",
        name: "utils",
        type: "folder" as const,
        children: [
          {
            id: "7",
            name: "helpers.ts",
            type: "file" as const,
          },
          {
            id: "8",
            name: "constants.ts",
            type: "file" as const,
          },
        ],
      },
      {
        id: "9",
        name: "index.ts",
        type: "file" as const,
      },
    ],
  },
  {
    id: "10",
    name: "public",
    type: "folder" as const,
    children: [
      {
        id: "11",
        name: "images",
        type: "folder" as const,
        children: [
          {
            id: "12",
            name: "logo.png",
            type: "file" as const,
          },
        ],
      },
    ],
  },
  {
    id: "13",
    name: "package.json",
    type: "file" as const,
  },
  {
    id: "14",
    name: "README.md",
    type: "file" as const,
  },
]

export function TreeDefault() {
  return (
    <div className="w-full max-w-md rounded-md border p-4">
      <Tree
        data={treeData}
        onSelect={(item) => console.log("Selected:", item.name)}
        showIcons={true}
      />
    </div>
  )
}

Installation


npm install @strongtie/design-system

import { Tree } from "@strongtie/design-system/tree"

Props

`<Tree>`

Prop	Type	Default	Description
`data` *	`TreeItem[]`	-	Array of tree items to display in the hierarchical structure. Each item can have children to create nested levels. Items with children will be expandable/collapsible.
`fileIcon`	`ReactNode`	-	Custom icon to use for all file-type items. Overrides the default file icon for items with type='file' or items without children. Individual items can still override this with their own icon property.
`folderIcon`	`ReactNode`	-	Custom icon to use for all folder-type items. Overrides the default folder icon for items with type='folder' or items that have children. Individual items can still override this with their own icon property.
`onSelect`	`((item: TreeItem) => void)`	-	Callback fired when a tree item is clicked. Receives the clicked tree item as an argument. Use this to handle navigation, selection state, or trigger actions based on the selected item.
`selectedId`	`string`	-	The ID of the currently selected tree item. When provided, the tree item with this ID will be visually highlighted. Use this for controlled selection state.
`showIcons`	`boolean`	`true`	Whether to display icons next to tree items. When true, shows type-based icons (folder/file) or custom icons provided in the tree item data.

Example

"use client"

import { Tree } from "@strongtie/design-system/tree"

const treeData = [
  {
    id: "1",
    name: "src",
    type: "folder" as const,
    children: [
      {
        id: "2",
        name: "components",
        type: "folder" as const,
        children: [
          {
            id: "3",
            name: "Button.tsx",
            type: "file" as const,
          },
          {
            id: "4",
            name: "Input.tsx",
            type: "file" as const,
          },
          {
            id: "5",
            name: "Card.tsx",
            type: "file" as const,
          },
        ],
      },
      {
        id: "6",
        name: "utils",
        type: "folder" as const,
        children: [
          {
            id: "7",
            name: "helpers.ts",
            type: "file" as const,
          },
          {
            id: "8",
            name: "constants.ts",
            type: "file" as const,
          },
        ],
      },
      {
        id: "9",
        name: "index.ts",
        type: "file" as const,
      },
    ],
  },
  {
    id: "10",
    name: "public",
    type: "folder" as const,
    children: [
      {
        id: "11",
        name: "images",
        type: "folder" as const,
        children: [
          {
            id: "12",
            name: "logo.png",
            type: "file" as const,
          },
        ],
      },
    ],
  },
  {
    id: "13",
    name: "package.json",
    type: "file" as const,
  },
  {
    id: "14",
    name: "README.md",
    type: "file" as const,
  },
]

export function TreeDefault() {
  return (
    <div className="w-full max-w-md rounded-md border p-4">
      <Tree
        data={treeData}
        onSelect={(item) => console.log("Selected:", item.name)}
        showIcons={true}
      />
    </div>
  )
}

Styling

Components can be styled using the className prop. The design system uses Tailwind CSS for styling.

Additional Classes

Other CSS classes used by this component:

?
isSelected
tree
tree-button
tree-chevron
tree-collapsible-content
tree-file-icon
tree-folder-icon
tree-icon
tree-line
tree-line-container
tree-node
tree-node-container
tree-spacer
tree-text

Accessibility

Ensure proper accessibility attributes are added when implementing this component.

Tooltip States and State Management

On This Page

Example Installation Props <Tree>Example Styling Additional Classes Accessibility

Contribute

Tree

The main Tree component that renders a hierarchical tree structure.

This component serves as the container for tree items and manages the overall tree display. It accepts tree data and configuration options, then renders TreeNode components for each top-level item.

Example

"use client"

import { Tree } from "@strongtie/design-system/tree"

const treeData = [
  {
    id: "1",
    name: "src",
    type: "folder" as const,
    children: [
      {
        id: "2",
        name: "components",
        type: "folder" as const,
        children: [
          {
            id: "3",
            name: "Button.tsx",
            type: "file" as const,
          },
          {
            id: "4",
            name: "Input.tsx",
            type: "file" as const,
          },
          {
            id: "5",
            name: "Card.tsx",
            type: "file" as const,
          },
        ],
      },
      {
        id: "6",
        name: "utils",
        type: "folder" as const,
        children: [
          {
            id: "7",
            name: "helpers.ts",
            type: "file" as const,
          },
          {
            id: "8",
            name: "constants.ts",
            type: "file" as const,
          },
        ],
      },
      {
        id: "9",
        name: "index.ts",
        type: "file" as const,
      },
    ],
  },
  {
    id: "10",
    name: "public",
    type: "folder" as const,
    children: [
      {
        id: "11",
        name: "images",
        type: "folder" as const,
        children: [
          {
            id: "12",
            name: "logo.png",
            type: "file" as const,
          },
        ],
      },
    ],
  },
  {
    id: "13",
    name: "package.json",
    type: "file" as const,
  },
  {
    id: "14",
    name: "README.md",
    type: "file" as const,
  },
]

export function TreeDefault() {
  return (
    <div className="w-full max-w-md rounded-md border p-4">
      <Tree
        data={treeData}
        onSelect={(item) => console.log("Selected:", item.name)}
        showIcons={true}
      />
    </div>
  )
}

Installation


npm install @strongtie/design-system

import { Tree } from "@strongtie/design-system/tree"

Props

`<Tree>`

Prop	Type	Default	Description
`data` *	`TreeItem[]`	-	Array of tree items to display in the hierarchical structure. Each item can have children to create nested levels. Items with children will be expandable/collapsible.
`fileIcon`	`ReactNode`	-	Custom icon to use for all file-type items. Overrides the default file icon for items with type='file' or items without children. Individual items can still override this with their own icon property.
`folderIcon`	`ReactNode`	-	Custom icon to use for all folder-type items. Overrides the default folder icon for items with type='folder' or items that have children. Individual items can still override this with their own icon property.
`onSelect`	`((item: TreeItem) => void)`	-	Callback fired when a tree item is clicked. Receives the clicked tree item as an argument. Use this to handle navigation, selection state, or trigger actions based on the selected item.
`selectedId`	`string`	-	The ID of the currently selected tree item. When provided, the tree item with this ID will be visually highlighted. Use this for controlled selection state.
`showIcons`	`boolean`	`true`	Whether to display icons next to tree items. When true, shows type-based icons (folder/file) or custom icons provided in the tree item data.

Example

"use client"

import { Tree } from "@strongtie/design-system/tree"

const treeData = [
  {
    id: "1",
    name: "src",
    type: "folder" as const,
    children: [
      {
        id: "2",
        name: "components",
        type: "folder" as const,
        children: [
          {
            id: "3",
            name: "Button.tsx",
            type: "file" as const,
          },
          {
            id: "4",
            name: "Input.tsx",
            type: "file" as const,
          },
          {
            id: "5",
            name: "Card.tsx",
            type: "file" as const,
          },
        ],
      },
      {
        id: "6",
        name: "utils",
        type: "folder" as const,
        children: [
          {
            id: "7",
            name: "helpers.ts",
            type: "file" as const,
          },
          {
            id: "8",
            name: "constants.ts",
            type: "file" as const,
          },
        ],
      },
      {
        id: "9",
        name: "index.ts",
        type: "file" as const,
      },
    ],
  },
  {
    id: "10",
    name: "public",
    type: "folder" as const,
    children: [
      {
        id: "11",
        name: "images",
        type: "folder" as const,
        children: [
          {
            id: "12",
            name: "logo.png",
            type: "file" as const,
          },
        ],
      },
    ],
  },
  {
    id: "13",
    name: "package.json",
    type: "file" as const,
  },
  {
    id: "14",
    name: "README.md",
    type: "file" as const,
  },
]

export function TreeDefault() {
  return (
    <div className="w-full max-w-md rounded-md border p-4">
      <Tree
        data={treeData}
        onSelect={(item) => console.log("Selected:", item.name)}
        showIcons={true}
      />
    </div>
  )
}

Styling

Components can be styled using the className prop. The design system uses Tailwind CSS for styling.

Additional Classes

Other CSS classes used by this component:

?
isSelected
tree
tree-button
tree-chevron
tree-collapsible-content
tree-file-icon
tree-folder-icon
tree-icon
tree-line
tree-line-container
tree-node
tree-node-container
tree-spacer
tree-text

Accessibility

Ensure proper accessibility attributes are added when implementing this component.

Tooltip States and State Management

On This Page

Example Installation Props <Tree>Example Styling Additional Classes Accessibility

Contribute