Yami UI

A hierarchical tree view for folders, layers, and nested data.

Installation

Add the tree component with the shadcn CLI.

npx shadcn@latest add https://yami.ui.unsanity.ai/r/tree.json

Usage

import {
  Tree, TreeGroup, TreeItem,
  TreeItemIcon, TreeItemLabel, TreeItemTrigger,
} from "@/components/ui/tree"
import { FileIcon, FolderIcon, FolderOpenIcon } from "lucide-react"

<Tree defaultSelectedId="index" defaultExpandedIds={["src"]}>
  <TreeItem id="src">
    <TreeItemTrigger itemId="src" hasChildren>
      <TreeItemIcon><FolderOpenIcon /></TreeItemIcon>
      <TreeItemLabel>src</TreeItemLabel>
    </TreeItemTrigger>
    <TreeGroup parentId="src">
      <TreeItem id="index">
        <TreeItemTrigger itemId="index">
          <TreeItemIcon><FileIcon /></TreeItemIcon>
          <TreeItemLabel>index.ts</TreeItemLabel>
        </TreeItemTrigger>
      </TreeItem>
    </TreeGroup>
  </TreeItem>
</Tree>

Examples

File tree

Folder and file hierarchy with icons

Code

import {
  Tree, TreeGroup, TreeItem,
  TreeItemIcon, TreeItemLabel, TreeItemTrigger,
} from "@/components/ui/tree"
import { FileIcon, FileJsonIcon, FolderIcon, FolderOpenIcon, ImageIcon } from "lucide-react"

<Tree defaultSelectedId="index" defaultExpandedIds={["src", "components"]}>
  <TreeItem id="src">
    <TreeItemTrigger itemId="src" hasChildren>
      <TreeItemIcon><FolderOpenIcon /></TreeItemIcon>
      <TreeItemLabel>src</TreeItemLabel>
    </TreeItemTrigger>
    <TreeGroup parentId="src">
      <TreeItem id="components">
        <TreeItemTrigger itemId="components" hasChildren>
          <TreeItemIcon><FolderOpenIcon /></TreeItemIcon>
          <TreeItemLabel>components</TreeItemLabel>
        </TreeItemTrigger>
        <TreeGroup parentId="components">
          <TreeItem id="button">
            <TreeItemTrigger itemId="button">
              <TreeItemIcon><FileIcon /></TreeItemIcon>
              <TreeItemLabel>button.tsx</TreeItemLabel>
            </TreeItemTrigger>
          </TreeItem>
        </TreeGroup>
      </TreeItem>
    </TreeGroup>
  </TreeItem>
</Tree>