BetaFeito sobre o UI SDK 0.1.0-beta.1 da Vercel. A API pode mudar.

Tree

Uma visualização em árvore sobre o UI SDK da Vercel para arquivos e páginas aninhadas, com caminhos de arquivo, caixas de seleção, links e filhos carregados sob demanda.

Componentes de exibição de dados
7 partes
12 exemplos
Atualizado em 13 de nov. de 2026

Depende de

@tabler/icons-react
@ui-sdk/core
@ui-sdk/react
class-variance-authority

app

components

button.tsx

tree.tsx

theme.tsx

package.json

README.md

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

import {
  Tree,
  TreeGroup,
  TreeItem,
  TreeItemIndicator,
  TreeItemLabel,
  type TreeItemData,
} from "@/components/ui/ui-sdk-tree"

const files: TreeItemData[] = [
  {
    value: "app",
    label: "app",
    children: [
      { value: "app/layout.tsx", label: "layout.tsx" },
      { value: "app/page.tsx", label: "page.tsx" },
      { value: "app/globals.css", label: "globals.css" },
    ],
  },
  {
    value: "components",
    label: "components",
    children: [
      {
        value: "components/ui",
        label: "ui",
        children: [
          { value: "components/ui/button.tsx", label: "button.tsx" },
          { value: "components/ui/tree.tsx", label: "tree.tsx" },
        ],
      },
      { value: "components/theme.tsx", label: "theme.tsx" },
    ],
  },
  { value: "package.json", label: "package.json" },
  { value: "README.md", label: "README.md" },
]

function Items({ items }: { items: TreeItemData[] }) {
  return items.map((item) => (
    <TreeItem key={item.value} value={item.value}>
      <TreeItemLabel>
        {item.children ? (
          <>
            <TreeItemIndicator />
            <IconFolder className="group-data-expanded/tree-label:hidden" />
            <IconFolderOpen className="not-group-data-expanded/tree-label:hidden" />
          </>
        ) : item.label.endsWith(".tsx") ? (
          <IconBrandTypescript />
        ) : (
          <IconFileText />
        )}
        <span>{item.label}</span>
      </TreeItemLabel>
      {item.children && (
        <TreeGroup>
          <Items items={item.children} />
        </TreeGroup>
      )}
    </TreeItem>
  ))
}

function UiSdkTreeDemo() {
  return (
    <Tree
      aria-label="Project files"
      items={files}
      defaultExpanded={["components", "components/ui"]}
      defaultValue="components/ui/tree.tsx"
      className="max-w-xs"
    >
      <Items items={files} />
    </Tree>
  )
}

export { UiSdkTreeDemo }

Instalação

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

Adiciona o componente, os tokens de tema do HextaUI e quaisquer componentes do HextaUI dos quais ele depende.

Adicione os tokens de tema ao seu CSS global, se ainda não o fez.

Instale as dependências.

pnpm add @ui-sdk/react@0.1.0-beta.1 @ui-sdk/core@0.1.0-beta.1 @tabler/icons-react class-variance-authority cn

3
Copie e cole o código a seguir no seu projeto.
components/ui/ui-sdk-tree.tsx
"use client" import * as React from "react" import { IconCheck, IconChevronRight, IconLoader2, IconMinus,
Atualize os caminhos de importação para corresponder à configuração do seu projeto.

O UI SDK adiciona um pouco de CSS próprio em uma camada de cascata chamada ui-sdk. Declare essa camada no topo da sua folha de estilos global, acima do import do Tailwind, para que suas classes vençam.

@layer ui-sdk;

@import "tailwindcss";

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

<Tree aria-label="Project files">
  <TreeItem value="src">
    <TreeItemLabel>
      <TreeItemIndicator />
      <span>src</span>
    </TreeItemLabel>
    <TreeGroup>
      <TreeItem value="src/index.ts">
        <TreeItemLabel>
          <span>index.ts</span>
        </TreeItemLabel>
      </TreeItem>
    </TreeGroup>
  </TreeItem>
</Tree>

Um item com um TreeGroup dentro é um ramo. Dê a cada item um value único e à árvore um nome acessível. O foco fica no item, e seu label é a linha que você vê, então os estilos de selecionado, atual e focado ficam no label.

Composição

Tree
└── TreeItem
    ├── TreeItemLabel
    │   ├── TreeItemIndicator
    │   └── TreeItemCheckbox
    └── TreeGroup
        └── TreeItem

Exemplos

Itens como dados

Abrir exemplo

Passe items sem filhos e a árvore renderiza linhas estilizadas com chevrons para você. Cada item tem um value, um label e children opcionais.

import { Tree, type TreeItemData } from "@/components/ui/ui-sdk-tree"

const items: TreeItemData[] = [
  {
    value: "fruit",
    label: "Fruit",
    children: [
      { value: "apple", label: "Apple" },
      { value: "banana", label: "Banana" },
      { value: "cherry", label: "Cherry" },
    ],
  },
  {
    value: "vegetables",
    label: "Vegetables",
    children: [
      { value: "carrot", label: "Carrot" },
      { value: "leek", label: "Leek" },
    ],
  },
  { value: "bread", label: "Bread" },
]

function UiSdkTreeData() {
  return (
    <Tree
      aria-label="Groceries"
      items={items}
      defaultExpanded={["fruit"]}
      className="max-w-xs"
    />
  )
}

export { UiSdkTreeData }

Caminhos de arquivo

Abrir exemplo

Passe paths para um explorador de arquivos, com pastas primeiro. Com activation="automatic" as setas selecionam, e um onAction que retorna uma promise marca a linha como pendente até terminar.

"use client"

import * as React from "react"
import { IconLoader2 } from "@tabler/icons-react"

import {
  Tree,
  TreeGroup,
  TreeItem,
  TreeItemIndicator,
  TreeItemLabel,
  treeFromPaths,
  type TreeItemData,
} from "@/components/ui/ui-sdk-tree"

const paths = [
  "src/index.ts",
  "src/lib/format.ts",
  "src/lib/parse.ts",
  "src/routes/home.tsx",
  "src/routes/about.tsx",
  "tests/",
  "package.json",
  "tsconfig.json",
]

const items = treeFromPaths(paths)
const files = new Set(paths.filter((path) => !path.endsWith("/")))

function Items({ items }: { items: TreeItemData[] }) {
  return items.map((item) => (
    <TreeItem key={item.value} value={item.value}>
      <TreeItemLabel>
        {(state) => (
          <>
            {item.children && <TreeItemIndicator />}
            <span>{item.label}</span>
            {state.pending && (
              <IconLoader2 className="ms-auto motion-safe:animate-spin" />
            )}
          </>
        )}
      </TreeItemLabel>
      {item.children && item.children.length > 0 && (
        <TreeGroup>
          <Items items={item.children} />
        </TreeGroup>
      )}
    </TreeItem>
  ))
}

function UiSdkTreePaths() {
  const [opened, setOpened] = React.useState<string | null>(null)

  return (
    <div className="flex w-full max-w-xs flex-col gap-3">
      <Tree
        aria-label="Project"
        paths={paths}
        defaultExpanded={["src"]}
        defaultValue="src/index.ts"
        activation="automatic"
        onAction={async (value) => {
          if (!files.has(value)) {
            return
          }
          await new Promise((resolve) => setTimeout(resolve, 600))
          setOpened(value)
        }}
      >
        <Items items={items} />
      </Tree>
      <p className="text-sm text-muted-foreground" aria-live="polite">
        {opened ? `Opened ${opened}` : "Press Enter to open a file."}
      </p>
    </div>
  )
}

export { UiSdkTreePaths }

Seleção múltipla

Abrir exemplo

Com mode="multiple", Cmd ou Ctrl com clique alterna um item e Shift estende um intervalo. expandOnPress={false} deixa a expansão para o chevron e as setas.

"use client"

import * as React from "react"

import { Tree, type TreeItemData } from "@/components/ui/ui-sdk-tree"

const items: TreeItemData[] = [
  {
    value: "inbox",
    label: "Inbox",
    children: [
      { value: "updates", label: "Updates" },
      { value: "forums", label: "Forums" },
      { value: "promotions", label: "Promotions" },
    ],
  },
  {
    value: "projects",
    label: "Projects",
    children: [
      { value: "website", label: "Website" },
      { value: "mobile", label: "Mobile app" },
    ],
  },
  { value: "archive", label: "Archive" },
  { value: "trash", label: "Trash" },
]

function UiSdkTreeMultiple() {
  const [value, setValue] = React.useState(["updates", "website"])

  return (
    <div className="flex w-full max-w-xs flex-col gap-3">
      <Tree
        aria-label="Folders"
        items={items}
        mode="multiple"
        value={value}
        onValueChange={setValue}
        expandOnPress={false}
        defaultExpanded={["inbox", "projects"]}
      />
      <p className="text-sm text-muted-foreground">{value.length} selected</p>
    </div>
  )
}

export { UiSdkTreeMultiple }

Checkboxes

Abrir exemplo

Adicione checkable e um TreeItemCheckbox em cada label. Marcar um ramo marca tudo dentro dele, e um ramo marcado em parte mostra um traço.

"use client"

import * as React from "react"

import {
  Tree,
  TreeGroup,
  TreeItem,
  TreeItemCheckbox,
  TreeItemIndicator,
  TreeItemLabel,
  type TreeItemData,
} from "@/components/ui/ui-sdk-tree"

const items: TreeItemData[] = [
  {
    value: "frontend",
    label: "Frontend",
    children: [
      { value: "react", label: "React" },
      { value: "vue", label: "Vue" },
      { value: "svelte", label: "Svelte" },
    ],
  },
  {
    value: "backend",
    label: "Backend",
    children: [
      { value: "node", label: "Node" },
      {
        value: "databases",
        label: "Databases",
        children: [
          { value: "postgres", label: "Postgres" },
          { value: "sqlite", label: "SQLite" },
        ],
      },
    ],
  },
]

function Items({ items }: { items: TreeItemData[] }) {
  return items.map((item) => (
    <TreeItem key={item.value} value={item.value}>
      <TreeItemLabel>
        {item.children && <TreeItemIndicator />}
        <TreeItemCheckbox />
        <span>{item.label}</span>
      </TreeItemLabel>
      {item.children && (
        <TreeGroup>
          <Items items={item.children} />
        </TreeGroup>
      )}
    </TreeItem>
  ))
}

function UiSdkTreeCheckboxes() {
  const [checked, setChecked] = React.useState(["react", "postgres"])

  return (
    <div className="flex w-full max-w-xs flex-col gap-3">
      <Tree
        aria-label="Stack"
        items={items}
        mode="none"
        checkable
        checked={checked}
        onCheckedChange={setChecked}
        defaultExpanded={["frontend", "backend", "databases"]}
      >
        <Items items={items} />
      </Tree>
      <p className="text-sm text-muted-foreground">
        {checked.length > 0 ? checked.join(", ") : "Nothing checked"}
      </p>
    </div>
  )
}

export { UiSdkTreeCheckboxes }

Abrir exemplo

Itens com href são renderizados como links. Com mode="none" e current, a página atual recebe aria-current, seus pais se abrem e ela recebe a parada de tab.

"use client"

import * as React from "react"

import { Tree, type TreeItemData } from "@/components/ui/ui-sdk-tree"

const pages: TreeItemData[] = [
  {
    value: "getting-started",
    label: "Getting started",
    children: [
      { value: "introduction", label: "Introduction", href: "#introduction" },
      { value: "installation", label: "Installation", href: "#installation" },
    ],
  },
  {
    value: "components",
    label: "Components",
    children: [
      { value: "accordion", label: "Accordion", href: "#accordion" },
      { value: "dialog", label: "Dialog", href: "#dialog" },
      { value: "tree", label: "Tree", href: "#tree" },
    ],
  },
  { value: "changelog", label: "Changelog", href: "#changelog" },
]

function UiSdkTreeLinks() {
  const [current, setCurrent] = React.useState("tree")

  return (
    <Tree
      aria-label="Docs"
      items={pages}
      mode="none"
      current={current}
      onAction={(value, { event }) => {
        if (value === "getting-started" || value === "components") {
          return
        }
        event?.preventDefault()
        setCurrent(value)
      }}
      className="max-w-xs"
    />
  )
}

export { UiSdkTreeLinks }

Carregar filhos

Abrir exemplo

Marque um item como branch antes de seus filhos existirem, e loadChildren roda na primeira vez que ele abre. O chevron vira um spinner enquanto carrega e um ícone de tentar de novo se falhar. Archive falha uma vez.

"use client"

import * as React from "react"

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

type Row = { value: string; label: string; branch?: boolean }

const top: Row[] = [
  { value: "users", label: "users", branch: true },
  { value: "orders", label: "orders", branch: true },
  { value: "archive", label: "archive", branch: true },
]

async function fetchRows(value: string, signal: AbortSignal, fail: boolean) {
  await new Promise((resolve, reject) => {
    const timer = setTimeout(resolve, 800)
    signal.addEventListener("abort", () => {
      clearTimeout(timer)
      reject(signal.reason)
    })
  })
  if (fail) {
    throw new Error("Network error")
  }
  return Array.from({ length: 3 }, (_, index) => ({
    value: `${value}/${index + 1}`,
    label: `${value}_${index + 1}.json`,
  }))
}

function Items({
  items,
  loaded,
}: {
  items: Row[]
  loaded: Record<string, Row[]>
}) {
  return items.map((item) => (
    <TreeItem key={item.value} value={item.value} branch={item.branch}>
      <TreeItemLabel>
        {item.branch && <TreeItemIndicator />}
        <span>{item.label}</span>
      </TreeItemLabel>
      {loaded[item.value] && (
        <TreeGroup>
          <Items items={loaded[item.value]} loaded={loaded} />
        </TreeGroup>
      )}
    </TreeItem>
  ))
}

function UiSdkTreeLazy() {
  const [loaded, setLoaded] = React.useState<Record<string, Row[]>>({})
  const failed = React.useRef(false)

  return (
    <Tree
      aria-label="Database"
      loadChildren={async (value, { signal }) => {
        const fail = value === "archive" && !failed.current
        failed.current ||= fail
        const rows = await fetchRows(value, signal, fail)
        setLoaded((current) => ({ ...current, [value]: rows }))
      }}
      className="max-w-xs"
    >
      <Items items={top} loaded={loaded} />
    </Tree>
  )
}

export { UiSdkTreeLazy }

Linhas e tamanho pequeno

Abrir exemplo

variant="lines" desenha uma guia de recuo para cada grupo aberto, e size="sm" deixa as linhas mais baixas.

import { Tree, type TreeItemData } from "@/components/ui/ui-sdk-tree"

const items: TreeItemData[] = [
  {
    value: "src",
    label: "src",
    children: [
      {
        value: "src/components",
        label: "components",
        children: [
          { value: "src/components/header.tsx", label: "header.tsx" },
          { value: "src/components/footer.tsx", label: "footer.tsx" },
        ],
      },
      { value: "src/main.tsx", label: "main.tsx" },
    ],
  },
  { value: "vite.config.ts", label: "vite.config.ts" },
]

function UiSdkTreeLines() {
  return (
    <Tree
      aria-label="Source"
      items={items}
      variant="lines"
      size="sm"
      defaultExpanded={["src", "src/components"]}
      className="max-w-xs"
    />
  )
}

export { UiSdkTreeLines }

Controlador

Abrir exemplo

Um controlador de createTreeController() expande, recolhe, seleciona e revela itens de qualquer lugar.

"use client"

import * as React from "react"

import { Button } from "@/components/ui/button"
import {
  createTreeController,
  Tree,
  type TreeItemData,
} from "@/components/ui/ui-sdk-tree"

const items: TreeItemData[] = [
  {
    value: "design",
    label: "Design",
    children: [
      { value: "tokens", label: "Tokens" },
      {
        value: "icons",
        label: "Icons",
        children: [
          { value: "outline", label: "Outline" },
          { value: "filled", label: "Filled" },
        ],
      },
    ],
  },
  {
    value: "engineering",
    label: "Engineering",
    children: [
      { value: "api", label: "API" },
      { value: "web", label: "Web" },
    ],
  },
]

function UiSdkTreeController() {
  const [tree] = React.useState(createTreeController)

  return (
    <div className="flex w-full max-w-xs flex-col gap-3">
      <div className="flex gap-2">
        <Button variant="outline" size="sm" onClick={() => tree.expandAll()}>
          Expand all
        </Button>
        <Button variant="outline" size="sm" onClick={() => tree.collapseAll()}>
          Collapse all
        </Button>
        <Button variant="ghost" size="sm" onClick={() => tree.reveal("filled")}>
          Reveal Filled
        </Button>
      </div>
      <Tree aria-label="Teams" items={items} controller={tree} />
    </div>
  )
}

export { UiSdkTreeController }

Localizar na página

Abrir exemplo

Com hiddenUntilFound, grupos fechados continuam na página, então a busca do navegador encontra Phobos e abre Mars para mostrá-lo.

import { Tree, type TreeItemData } from "@/components/ui/ui-sdk-tree"

const items: TreeItemData[] = [
  {
    value: "planets",
    label: "Planets",
    children: [
      { value: "mercury", label: "Mercury" },
      { value: "venus", label: "Venus" },
      {
        value: "earth",
        label: "Earth",
        children: [{ value: "moon", label: "The Moon" }],
      },
      {
        value: "mars",
        label: "Mars",
        children: [
          { value: "phobos", label: "Phobos" },
          { value: "deimos", label: "Deimos" },
        ],
      },
    ],
  },
  {
    value: "dwarf-planets",
    label: "Dwarf planets",
    children: [
      { value: "ceres", label: "Ceres" },
      {
        value: "pluto",
        label: "Pluto",
        children: [{ value: "charon", label: "Charon" }],
      },
    ],
  },
]

function UiSdkTreeFindInPage() {
  return (
    <Tree
      aria-label="Solar system"
      items={items}
      hiddenUntilFound
      className="max-w-xs"
    />
  )
}

export { UiSdkTreeFindInPage }

Desabilitado

Abrir exemplo

Um item desativado ainda recebe foco, para que leitores de tela o encontrem, mas não pode ser selecionado, marcado nem aberto.

import { Tree, type TreeItemData } from "@/components/ui/ui-sdk-tree"

const items: TreeItemData[] = [
  {
    value: "workspace",
    label: "Workspace",
    children: [
      { value: "general", label: "General" },
      { value: "billing", label: "Billing", disabled: true },
      { value: "members", label: "Members" },
    ],
  },
  { value: "danger", label: "Danger zone", disabled: true },
]

function UiSdkTreeDisabled() {
  return (
    <Tree
      aria-label="Settings"
      items={items}
      defaultExpanded={["workspace"]}
      defaultValue="general"
      className="max-w-xs"
    />
  )
}

export { UiSdkTreeDisabled }

Da direita para a esquerda

Abrir exemplo

As linhas recuam a partir da direita, o chevron aponta para a esquerda e as setas esquerda e direita se invertem.

import { Tree, type TreeItemData } from "@/components/ui/ui-sdk-tree"

const items: TreeItemData[] = [
  {
    value: "documents",
    label: "المستندات",
    children: [
      { value: "reports", label: "التقارير" },
      { value: "invoices", label: "الفواتير" },
    ],
  },
  {
    value: "photos",
    label: "الصور",
    children: [{ value: "trips", label: "الرحلات" }],
  },
  { value: "notes", label: "ملاحظات" },
]

function UiSdkTreeRtl() {
  return (
    <div dir="rtl" className="w-full max-w-xs">
      <Tree
        aria-label="الملفات"
        items={items}
        defaultExpanded={["documents"]}
        defaultValue="reports"
      />
    </div>
  )
}

export { UiSdkTreeRtl }

Teclado

Tecla	Ação
`↓↑`	Vai para o próximo item visível ou o anterior.
`→`	Abre um ramo ou vai para o primeiro filho.
`←`	Fecha um ramo ou vai para o pai dele.
`HomeEnd`	Vai para o primeiro ou último item visível.
`Alt→`	Abre um ramo e tudo dentro dele.
`*`	Abre todos os ramos ao lado do focado.
`Enter`	Seleciona o item e executa sua ação, ou segue seu link.
`Space`	Marca o item quando a árvore é marcável; caso contrário, o seleciona.
`Shift↓`	Estende uma seleção múltipla.
`⌘A`	Seleciona todos os itens visíveis no modo múltiplo.

Acessibilidade

A árvore segue o padrão WAI-ARIA de visualização em árvore com uma única parada de tab. O Tab cai na página atual, no item selecionado ou no primeiro item. Digitar uma letra vai para o próximo item que começa com ela. Enquanto um onAction lento roda, leitores de tela ouvem pendingAnnouncement após um segundo, então defina-o no idioma da sua página.

Os grupos abrem e fecham pela altura só quando o movimento é permitido. Em telas de toque as linhas são mais altas, e no modo de cores forçadas as linhas selecionada e atual ganham um contorno.

Referência da API

Cada parte envolve a parte do UI SDK de mesmo nome e aceita todas as suas props, incluindo render e um className que pode ser uma função do estado da parte.

Tree

Prop	Tipo	Padrão
`items`A hierarquia inteira. Sem filhos, a árvore renderiza linhas estilizadas a partir dela.	`TreeItemData[]`	`–`
`paths`Caminhos de arquivo. Pastas viram ramos; um caminho terminado em / é uma pasta vazia.	`string[]`	`–`
`mode`	`"single" \| "multiple" \| "none"`	`"single"`
`value`	`string \| string[] \| null`	`–`
`defaultValue`	`string \| string[] \| null`	`–`
`onValueChange`	`(value, details) => void`	`–`
`activation`	`"automatic" \| "manual"`	`"manual"`
`expanded`	`string[]`	`–`
`defaultExpanded`	`string[]`	`–`
`onExpandedChange`	`(expanded, details) => void`	`–`
`expandOnPress`	`boolean`	`true`
`checkable`	`boolean`	`false`
`checked`	`string[]`	`–`
`defaultChecked`	`string[]`	`–`
`onCheckedChange`	`(checked, details) => void`	`–`
`checkStrategy`	`"leaf" \| "trunk" \| "branch" \| "independent"`	`"leaf"`
`onAction`Roda ao pressionar ou com Enter. Retorne uma promise para marcar o item como pendente.	`(value, details) => unknown`	`–`
`pendingAnnouncement`	`string`	`–`
`loadChildren`	`(value, { signal }) => Promise<unknown>`	`–`
`current`	`string \| null`	`–`
`disabled`	`boolean`	`false`
`hiddenUntilFound`	`boolean`	`false`
`keepMounted`	`boolean`	`false`
`variant`	`"default" \| "lines"`	`"default"`
`size`	`"default" \| "sm"`	`"default"`
`controller`De createTreeController().	`TreeController`	`–`

Atributo	Descrição
`data-slot="tree"`	Seleciona a árvore no CSS.
`data-variant`	A variante: default ou lines.
`data-size`	O tamanho: default ou sm.
`--tree-row-height`	A altura de cada linha, definida por size.
`--tree-indent`	Quanto cada nível é recuado.

TreeItem

Prop	Tipo	Padrão
`value`Único na árvore.	`string`	`–`
`branch`Use-o para um ramo cujos filhos carregam depois.	`boolean`	`–`
`disabled`	`boolean`	`false`
`label`O texto que a digitação antecipada busca quando o label não é texto simples.	`string`	`–`
`render`	`ReactElement \| (props, state) => ReactElement`	`–`

Atributo	Descrição
`data-slot="tree-item"`	Seleciona um item no CSS. Ele recebe o foco.
`data-level`	A profundidade, a partir de 1.
`data-branch`	Presente em um ramo.
`data-expanded`	Presente enquanto um ramo está aberto.
`--tree-level`	A profundidade, para recuar uma lista plana.

TreeItemLabel

Prop	Tipo	Padrão
`render`	`ReactElement \| (props, state) => ReactElement`	`–`

Atributo	Descrição
`data-slot="tree-label"`	Seleciona uma linha no CSS.
`data-selected`	Presente enquanto o item está selecionado.
`data-current`	Presente no item da página atual.
`data-expanded`	Presente enquanto um ramo está aberto.
`data-pending`	Presente enquanto o onAction do item roda.
`data-disabled`	Presente quando o item está desabilitado.

TreeItemIndicator

Prop	Tipo	Padrão
`children`Por padrão, um chevron, um spinner ao carregar e um ícone de tentar de novo após uma falha.	`ReactNode \| (state) => ReactNode`	`–`

Atributo	Descrição
`data-slot="tree-indicator"`	Seleciona o chevron no CSS.
`data-loading`	Presente enquanto os filhos carregam.
`data-failed`	Presente após falhar o carregamento dos filhos.

TreeItemCheckbox

Prop	Tipo	Padrão
`children`Por padrão, uma marca, ou um traço quando misto.	`ReactNode \| (state) => ReactNode`	`–`

Atributo	Descrição
`data-slot="tree-checkbox"`	Seleciona a caixa de seleção no CSS.
`data-checked`	Presente enquanto está marcado.
`data-indeterminate`	Presente enquanto um ramo está marcado em parte.

TreeGroup

Prop	Tipo	Padrão
`keepMounted`	`boolean`	`–`
`hiddenUntilFound`	`boolean`	`–`

Atributo	Descrição
`data-slot="tree-group"`	Seleciona um grupo no CSS.
`data-open`	Presente enquanto aberto.
`--tree-group-height`	A altura do grupo enquanto anima.

Tree

Instalação

Uso

Composição

Exemplos

Itens como dados

Caminhos de arquivo

Seleção múltipla

Checkboxes

Navegação

Carregar filhos

Linhas e tamanho pequeno

Controlador

Localizar na página

Desabilitado

Da direita para a esquerda

Teclado

Acessibilidade

Referência da API

Tree

TreeItem

TreeItemLabel

TreeItemIndicator

TreeItemCheckbox

TreeGroup