Tree

Composable tree view built from native <details> and <summary> primitives.

src
components
lib

Usage

import {Tree} from 'kinu';

<Tree>
  <Tree.Group open>
    <Tree.GroupLabel>src</Tree.GroupLabel>
    <Tree.GroupItems>
      <Tree.Item>index.ts</Tree.Item>
    </Tree.GroupItems>
  </Tree.Group>
</Tree>

Exports

Name Description Rendered HTML
Tree Tree view —
Tree.Group Tree branch <details k="tree-item">
Tree.GroupLabel Branch label <summary k="tree-label">
Tree.GroupItems Branch items <div k="tree-group">
Tree.Item Tree leaf <button k="tree-leaf">

Props

Tree.GroupProps

Prop Type Default Description
open boolean — Controls the open state of the tree group.

Tree.ItemProps

Prop Type Default Description
disabled boolean — Disable tree item interactions.

Notes

  • State is native via the open attribute on Tree.Group.
  • Nest Tree.Group inside Tree.GroupItems for deeper hierarchies.

_Source: src/components/tree/index.tsx