Tree

Hierarchical tree view with expand/collapse, checkboxes, drag-and-drop, icons, and connector lines.

Basic Tree

Preview

src 4
- components
  - Button.tsx
  - Card.tsx

<div class="tree">
  <ul class="tree-list">
    <li class="tree-node">
      <div class="tree-item">
        <span class="tree-toggle tree-toggle-expanded"><svg viewBox="0 0 10 10" class="size-3.5"><path d="M3 1l4 4-4 4" fill="none" stroke="currentColor" stroke-width="1.5"/></svg></span>
        <span class="tree-icon tree-icon-folder"><svg xmlns="http://www.w3.org/2000/svg" class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg></span>
        <span class="tree-label">src</span>
        <span class="tree-badge">4</span>
      </div>
      <ul class="tree-list tree-list-nested">
        <li class="tree-node">
          <div class="tree-item">
            <span class="tree-toggle tree-toggle-expanded"><svg viewBox="0 0 10 10" class="size-3.5"><path d="M3 1l4 4-4 4" fill="none" stroke="currentColor" stroke-width="1.5"/></svg></span>
            <span class="tree-icon tree-icon-folder"><svg xmlns="http://www.w3.org/2000/svg" class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg></span>
            <span class="tree-label">components</span>
          </div>
          <ul class="tree-list tree-list-nested">
            <li class="tree-node">
              <div class="tree-item tree-item-selected">
                <span class="tree-toggle tree-toggle-empty"><svg viewBox="0 0 10 10" class="size-3.5"><path d="M3 1l4 4-4 4" fill="none" stroke="currentColor" stroke-width="1.5"/></svg></span>
                <span class="tree-icon tree-icon-file"><svg xmlns="http://www.w3.org/2000/svg" class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/></svg></span>
                <span class="tree-label">Button.tsx</span>
              </div>
            </li>
            <li class="tree-node">
              <div class="tree-item">
                <span class="tree-toggle tree-toggle-empty"><svg viewBox="0 0 10 10" class="size-3.5"><path d="M3 1l4 4-4 4" fill="none" stroke="currentColor" stroke-width="1.5"/></svg></span>
                <span class="tree-icon tree-icon-file"><svg xmlns="http://www.w3.org/2000/svg" class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/></svg></span>
                <span class="tree-label">Card.tsx</span>
              </div>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

Requires: ux.min.css

<div class="text-[0.9375rem] select-none">
  <ul class="list-none m-0 p-0">
    <li>
      <div class="flex items-center gap-1 px-2 py-1 rounded-field cursor-pointer hover:bg-base-200">
        <svg class="size-5 text-base-content/40 rotate-90">...</svg>
        <svg class="size-5 text-warning">...</svg>
        <span class="flex-1 truncate">src</span>
      </div>
      <ul class="list-none m-0 pl-4"><!-- nested items --></ul>
    </li>
  </ul>
</div>

Requires: tw.min.css

// Toggle expand/collapse:
// toggle.addEventListener('click', () => {
//   toggle.classList.toggle('tree-toggle-expanded');
//   children.hidden = !children.hidden;
// });

With Checkboxes

Preview

Select all
- Option A
- Option B

<div class="tree">
  <ul class="tree-list">
    <li class="tree-node">
      <div class="tree-item">
        <span class="tree-toggle tree-toggle-expanded"><svg viewBox="0 0 10 10" class="size-3.5"><path d="M3 1l4 4-4 4" fill="none" stroke="currentColor" stroke-width="1.5"/></svg></span>
        <span class="tree-checkbox tree-checkbox-indeterminate"></span>
        <span class="tree-label">Select all</span>
      </div>
      <ul class="tree-list tree-list-nested">
        <li class="tree-node">
          <div class="tree-item">
            <span class="tree-toggle tree-toggle-empty"><svg viewBox="0 0 10 10" class="size-3.5"><path d="M3 1l4 4-4 4" fill="none" stroke="currentColor" stroke-width="1.5"/></svg></span>
            <span class="tree-checkbox tree-checkbox-checked"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></span>
            <span class="tree-label">Option A</span>
          </div>
        </li>
        <li class="tree-node">
          <div class="tree-item">
            <span class="tree-toggle tree-toggle-empty"><svg viewBox="0 0 10 10" class="size-3.5"><path d="M3 1l4 4-4 4" fill="none" stroke="currentColor" stroke-width="1.5"/></svg></span>
            <span class="tree-checkbox"></span>
            <span class="tree-label">Option B</span>
          </div>
        </li>
      </ul>
    </li>
  </ul>
</div>

Requires: ux.min.css

<div class="text-[0.9375rem] select-none">
  <ul class="list-none m-0 p-0">
    <li>
      <div class="flex items-center gap-1 px-2 py-1 rounded-field cursor-pointer hover:bg-base-200">
        <span class="flex items-center justify-center shrink-0 w-5 h-5 text-base-content/40 rotate-90 transition-transform">
          <svg viewBox="0 0 10 10" class="size-3.5"><path d="M3 1l4 4-4 4" fill="none" stroke="currentColor" stroke-width="1.5"/></svg>
        </span>
        <span class="flex items-center justify-center shrink-0 w-4.5 h-4.5 rounded-field bg-primary border-2 border-primary">
          <span class="w-2 h-0.5 bg-primary-content rounded-sm"></span>
        </span>
        <span class="flex-1 truncate leading-[1.4]">Select all</span>
      </div>
      <ul class="list-none m-0 pl-4">
        <li>
          <div class="flex items-center gap-1 px-2 py-1 rounded-field cursor-pointer hover:bg-base-200">
            <span class="flex items-center justify-center shrink-0 w-5 h-5 invisible">
              <svg viewBox="0 0 10 10" class="size-3.5"><path d="M3 1l4 4-4 4" fill="none" stroke="currentColor" stroke-width="1.5"/></svg>
            </span>
            <span class="flex items-center justify-center shrink-0 w-4.5 h-4.5 rounded-field bg-primary border-2 border-primary text-primary-content">
              <svg xmlns="http://www.w3.org/2000/svg" class="w-3 h-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg>
            </span>
            <span class="flex-1 truncate leading-[1.4]">Option A</span>
          </div>
        </li>
        <li>
          <div class="flex items-center gap-1 px-2 py-1 rounded-field cursor-pointer hover:bg-base-200">
            <span class="flex items-center justify-center shrink-0 w-5 h-5 invisible">
              <svg viewBox="0 0 10 10" class="size-3.5"><path d="M3 1l4 4-4 4" fill="none" stroke="currentColor" stroke-width="1.5"/></svg>
            </span>
            <span class="flex items-center justify-center shrink-0 w-4.5 h-4.5 rounded-field bg-base-100 border-2 border-base-300"></span>
            <span class="flex-1 truncate leading-[1.4]">Option B</span>
          </div>
        </li>
      </ul>
    </li>
  </ul>
</div>

Requires: tw.min.css

// Toggle checkbox: el.classList.toggle('tree-checkbox-checked');
// Update parent: set indeterminate if some children checked

Class	Description
`.tree`	Base container
`.tree-list`	List element
`.tree-list-nested`	Indented child list
`.tree-node`	Node container
`.tree-item`	Clickable item row
`.tree-item-selected`	Selected state
`.tree-toggle`	Expand/collapse arrow
`.tree-toggle-expanded`	Rotated (expanded)
`.tree-toggle-empty`	Hidden (leaf node)
`.tree-checkbox`	Selection checkbox
`.tree-checkbox-checked`	Checked state
`.tree-checkbox-indeterminate`	Partial selection
`.tree-icon`	Node icon
`.tree-icon-folder`	Folder icon (warning color)
`.tree-icon-file`	File icon (muted)
`.tree-label`	Node text (truncated)
`.tree-badge`	Count badge
`.tree-actions`	Hover actions
`.tree-action`	Action button
`.tree-sm`	Small size
`.tree-lg`	Large size
`.tree-lines`	Connector lines variant
`.tree-bordered`	Bordered variant
`.tree.glass`	Glass morphism variant