BêtaConstruit sur l’UI SDK 0.1.0-beta.1 de Vercel. Son API peut changer.

Tree

Une arborescence sur l’UI SDK de Vercel pour fichiers et pages imbriquées, avec chemins de fichiers, cases à cocher, liens et enfants chargés à la demande.

Composants d’affichage de données
7 parties
12 exemples
Mis à jour le 13 nov. 2026

Dépend 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 }

Installation

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

Ajoute le composant, les tokens de thème HextaUI et les composants HextaUI dont il dépend.

Ajoutez les tokens de thème à votre CSS global, si ce n’est pas déjà fait.

Installez les dépendances.

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
Copiez et collez le code suivant dans votre projet.
components/ui/ui-sdk-tree.tsx
"use client" import * as React from "react" import { IconCheck, IconChevronRight, IconLoader2, IconMinus,
Mettez à jour les chemins d’import selon la configuration de votre projet.

UI SDK ajoute un peu de CSS dans une couche de cascade nommée ui-sdk. Déclarez cette couche en haut de votre feuille de style globale, au-dessus de l’import Tailwind, pour que vos classes l’emportent.

@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>

Un élément contenant un TreeGroup est une branche. Donnez à chaque élément une value unique et à l’arbre un nom accessible. Le focus reste sur l’élément, et son label est la ligne visible : les styles sélectionné, courant et focus s’appliquent donc au label.

Composition

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

Exemples

Éléments en données

Ouvrir l’exemple

Passez items sans enfants, et l’arbre affiche pour vous des lignes stylées avec chevrons. Chaque élément a une value, un label et des children facultatifs.

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 }

Chemins de fichiers

Ouvrir l’exemple

Passez paths pour un explorateur de fichiers, dossiers en premier. Avec activation="automatic", les flèches sélectionnent, et un onAction qui renvoie une promesse marque la ligne en attente jusqu’à sa résolution.

"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 }

Sélection multiple

Ouvrir l’exemple

Avec mode="multiple", Cmd ou Ctrl-clic bascule un élément et Maj étend une plage. expandOnPress={false} laisse le dépliage au chevron et aux flèches.

"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 }

Cases à cocher

Ouvrir l’exemple

Ajoutez checkable et un TreeItemCheckbox dans chaque label. Cocher une branche coche tout ce qu’elle contient, et une branche cochée en partie affiche un tiret.

"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 }

Ouvrir l’exemple

Les éléments avec un href s’affichent comme des liens. Avec mode="none" et current, la page courante reçoit aria-current, ses parents s’ouvrent et elle prend l’arrêt de tabulation.

"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 }

Chargement des enfants

Ouvrir l’exemple

Marquez un élément branch avant que ses enfants existent, et loadChildren s’exécute à sa première ouverture. Le chevron devient un spinner pendant le chargement, et une icône de nouvel essai en cas d’échec. Archive échoue une fois.

"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 }

Lignes et petite taille

Ouvrir l’exemple

variant="lines" trace un guide de retrait pour chaque groupe ouvert, et size="sm" rend les lignes moins hautes.

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 }

Contrôleur

Ouvrir l’exemple

Un contrôleur issu de createTreeController() déplie, replie, sélectionne et révèle des éléments depuis n’importe où.

"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 }

Rechercher dans la page

Ouvrir l’exemple

Avec hiddenUntilFound, les groupes fermés restent dans la page : la recherche du navigateur trouve Phobos et ouvre Mars pour l’afficher.

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 }

Désactivé

Ouvrir l’exemple

Un élément désactivé peut encore prendre le focus, pour que les lecteurs d’écran le trouvent, mais il ne peut être ni sélectionné, ni coché, ni ouvert.

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 }

De droite à gauche

Ouvrir l’exemple

Les lignes sont décalées depuis la droite, le chevron pointe à gauche, et les flèches gauche et droite s’inversent.

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 }

Clavier

Touche	Action
`↓↑`	Passe à l’élément visible suivant ou précédent.
`→`	Ouvre une branche ou passe à son premier enfant.
`←`	Ferme une branche ou passe à son parent.
`HomeEnd`	Passe au premier ou dernier élément visible.
`Alt→`	Ouvre une branche et tout ce qu’elle contient.
`*`	Ouvre toutes les branches voisines de celle ciblée.
`Enter`	Sélectionne l’élément et lance son action, ou suit son lien.
`Space`	Coche l’élément si l’arbre est cochable, sinon le sélectionne.
`Shift↓`	Étend une sélection multiple.
`⌘A`	Sélectionne tous les éléments visibles en mode multiple.

Accessibilité

L’arbre suit le motif WAI-ARIA de l’arborescence avec un seul arrêt de tabulation. Tab arrive sur la page courante, l’élément sélectionné ou le premier élément. Taper une lettre passe à l’élément suivant qui commence par elle. Pendant un onAction lent, les lecteurs d’écran entendent pendingAnnouncement au bout d’une seconde : réglez-le dans la langue de votre page.

Les groupes ne s’ouvrent et se ferment en hauteur que si le mouvement est autorisé. Sur écran tactile, les lignes sont plus hautes, et en mode couleurs forcées les lignes sélectionnée et courante reçoivent un contour.

Référence de l’API

Chaque partie enveloppe la partie UI SDK du même nom et accepte toutes ses props, y compris render et un className qui peut être une fonction de son état.

Tree

Prop	Type	Par défaut
`items`Toute la hiérarchie. Sans enfants, l’arbre en affiche des lignes stylées.	`TreeItemData[]`	`–`
`paths`Chemins de fichiers. Les dossiers deviennent des branches ; un chemin finissant par / est un dossier vide.	`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`S’exécute à l’appui ou avec Entrée. Renvoyez une promesse pour marquer l’élément en attente.	`(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`Issu de createTreeController().	`TreeController`	`–`

Attribut	Description
`data-slot="tree"`	Cible l’arbre en CSS.
`data-variant`	La variante : default ou lines.
`data-size`	La taille : default ou sm.
`--tree-row-height`	La hauteur de chaque ligne, réglée par size.
`--tree-indent`	Le retrait de chaque niveau.

TreeItem

Prop	Type	Par défaut
`value`Unique dans l’arbre.	`string`	`–`
`branch`À définir pour une branche dont les enfants se chargent plus tard.	`boolean`	`–`
`disabled`	`boolean`	`false`
`label`Le texte que la saisie rapide recherche quand le label n’est pas du texte brut.	`string`	`–`
`render`	`ReactElement \| (props, state) => ReactElement`	`–`

Attribut	Description
`data-slot="tree-item"`	Cible un élément en CSS. Il porte le focus.
`data-level`	La profondeur, à partir de 1.
`data-branch`	Présent sur une branche.
`data-expanded`	Présent tant qu’une branche est ouverte.
`--tree-level`	La profondeur, pour décaler une liste à plat.

TreeItemLabel

Prop	Type	Par défaut
`render`	`ReactElement \| (props, state) => ReactElement`	`–`

Attribut	Description
`data-slot="tree-label"`	Cible une ligne en CSS.
`data-selected`	Présent tant que l’élément est sélectionné.
`data-current`	Présent sur l’élément de la page courante.
`data-expanded`	Présent tant qu’une branche est ouverte.
`data-pending`	Présent pendant l’exécution du onAction de l’élément.
`data-disabled`	Présent lorsque l’item est désactivé.

TreeItemIndicator

Prop	Type	Par défaut
`children`Par défaut, un chevron, un spinner pendant le chargement et une icône de nouvel essai après un échec.	`ReactNode \| (state) => ReactNode`	`–`

Attribut	Description
`data-slot="tree-indicator"`	Cible le chevron en CSS.
`data-loading`	Présent pendant le chargement des enfants.
`data-failed`	Présent après l’échec du chargement des enfants.

TreeItemCheckbox

Prop	Type	Par défaut
`children`Par défaut, une coche, ou un tiret si mixte.	`ReactNode \| (state) => ReactNode`	`–`

Attribut	Description
`data-slot="tree-checkbox"`	Cible la case à cocher en CSS.
`data-checked`	Présent tant que coché.
`data-indeterminate`	Présent tant qu’une branche est cochée en partie.

TreeGroup

Prop	Type	Par défaut
`keepMounted`	`boolean`	`–`
`hiddenUntilFound`	`boolean`	`–`

Attribut	Description
`data-slot="tree-group"`	Cible un groupe en CSS.
`data-open`	Présent tant que l’élément est ouvert.
`--tree-group-height`	La hauteur du groupe pendant l’animation.

Tree

Installation

Utilisation

Composition

Exemples

Éléments en données

Chemins de fichiers

Sélection multiple

Cases à cocher

Navigation

Chargement des enfants

Lignes et petite taille

Contrôleur

Rechercher dans la page

Désactivé

De droite à gauche

Clavier

Accessibilité

Référence de l’API

Tree

TreeItem

TreeItemLabel

TreeItemIndicator

TreeItemCheckbox

TreeGroup