BOM Tree

Bill of Materials tree component with hierarchy, type badges, stock indicators, cost display, search, and drag-drop support. Designed for ERPlora manufacturing workflows.

BOM Tree with Items

Preview

ERPlora Hydraulic Valve Assembly

Hydraulic Valve Assembly FIN-HVA-001
Finished
1 unit

$284.50 total
- Valve Body Subassembly SUB-VB-042
  Sub-Assy
  1 unit
  
  In Stock (24)
  
  $142.00 per unit
  - Steel Billet - Grade 316L RAW-STL-316L
    Raw
    2.5 kg
    
    Low (12 kg)
    
    $45.00 per unit
  - O-Ring Seal Kit CON-ORK-008
    Consumable
    4 pcs
    
    In Stock (580)
    
    $3.20 per unit
- Actuator Spring - Heavy Duty RAW-SPR-HD7
  Raw
  2 pcs
  
  Out of Stock
  
  $18.75 per unit
- Anti-Static Blister Pack PKG-ASB-020
  Packaging
  1 pcs
  
  In Stock (300)
  
  $1.80 per unit

<div class="bom-tree bom-tree-bordered">
  <div class="bom-tree-header">
    <span class="bom-tree-title">ERPlora Hydraulic Valve Assembly</span>
    <div class="bom-tree-actions">
      <button class="bom-tree-action" title="Expand All">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg>
      </button>
      <button class="bom-tree-action" title="Collapse All">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 15l-6-6-6 6"/></svg>
      </button>
    </div>
  </div>
  <div class="bom-tree-search">
    <input class="bom-tree-search-input" type="text" placeholder="Search components...">
  </div>
  <ul class="bom-tree-list">
    <!-- Level 0: Finished product -->
    <li class="bom-tree-node">
      <div class="bom-tree-item bom-tree-item-selected">
        <div class="bom-tree-toggle bom-tree-toggle-expanded">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
        </div>
        <div class="bom-tree-icon bom-tree-icon-finished">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 16V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l7-4A2 2 0 0021 16z"/></svg>
        </div>
        <div class="bom-tree-details">
          <span class="bom-tree-name">Hydraulic Valve Assembly</span>
          <span class="bom-tree-sku">FIN-HVA-001</span>
        </div>
        <span class="bom-tree-type bom-tree-type-finished">Finished</span>
        <div class="bom-tree-quantity">
          <span class="bom-tree-qty-value">1</span>
          <span class="bom-tree-qty-unit">unit</span>
        </div>
        <div class="bom-tree-cost bom-tree-cost-total">
          <span class="bom-tree-cost-value">$284.50</span>
          <span class="bom-tree-cost-label">total</span>
        </div>
      </div>
      <!-- Level 1 children -->
      <ul class="bom-tree-list bom-tree-list-nested">
        <li class="bom-tree-node">
          <div class="bom-tree-item">
            <div class="bom-tree-toggle bom-tree-toggle-expanded">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
            </div>
            <div class="bom-tree-level">
              <div class="bom-tree-level-bar bom-tree-level-bar-l1"></div>
            </div>
            <div class="bom-tree-icon bom-tree-icon-subassembly">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M12 1v4M12 19v4M4.22 4.22l2.83 2.83M16.95 16.95l2.83 2.83M1 12h4M19 12h4M4.22 19.78l2.83-2.83M16.95 7.05l2.83-2.83"/></svg>
            </div>
            <div class="bom-tree-details">
              <span class="bom-tree-name">Valve Body Subassembly</span>
              <span class="bom-tree-sku">SUB-VB-042</span>
            </div>
            <span class="bom-tree-type bom-tree-type-subassembly">Sub-Assy</span>
            <div class="bom-tree-quantity">
              <span class="bom-tree-qty-value">1</span>
              <span class="bom-tree-qty-unit">unit</span>
            </div>
            <div class="bom-tree-stock bom-tree-stock-in-stock">
              <span class="bom-tree-stock-dot"></span>
              <span class="bom-tree-stock-text">In Stock (24)</span>
            </div>
            <div class="bom-tree-cost">
              <span class="bom-tree-cost-value">$142.00</span>
              <span class="bom-tree-cost-label">per unit</span>
            </div>
          </div>
          <!-- Level 2 children -->
          <ul class="bom-tree-list bom-tree-list-nested">
            <li class="bom-tree-node">
              <div class="bom-tree-item">
                <div class="bom-tree-toggle bom-tree-toggle-empty"></div>
                <div class="bom-tree-level">
                  <div class="bom-tree-level-bar bom-tree-level-bar-l1"></div>
                  <div class="bom-tree-level-bar bom-tree-level-bar-l2"></div>
                </div>
                <div class="bom-tree-icon bom-tree-icon-raw">
                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="2" width="20" height="20" rx="2"/></svg>
                </div>
                <div class="bom-tree-details">
                  <span class="bom-tree-name">Steel Billet - Grade 316L</span>
                  <span class="bom-tree-sku">RAW-STL-316L</span>
                </div>
                <span class="bom-tree-type bom-tree-type-raw">Raw</span>
                <div class="bom-tree-quantity">
                  <span class="bom-tree-qty-value">2.5</span>
                  <span class="bom-tree-qty-unit">kg</span>
                </div>
                <div class="bom-tree-stock bom-tree-stock-low-stock">
                  <span class="bom-tree-stock-dot"></span>
                  <span class="bom-tree-stock-text">Low (12 kg)</span>
                </div>
                <div class="bom-tree-cost">
                  <span class="bom-tree-cost-value">$45.00</span>
                  <span class="bom-tree-cost-label">per unit</span>
                </div>
              </div>
            </li>
            <li class="bom-tree-node">
              <div class="bom-tree-item">
                <div class="bom-tree-toggle bom-tree-toggle-empty"></div>
                <div class="bom-tree-level">
                  <div class="bom-tree-level-bar bom-tree-level-bar-l1"></div>
                  <div class="bom-tree-level-bar bom-tree-level-bar-l2"></div>
                </div>
                <div class="bom-tree-icon bom-tree-icon-consumable">
                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z"/></svg>
                </div>
                <div class="bom-tree-details">
                  <span class="bom-tree-name">O-Ring Seal Kit</span>
                  <span class="bom-tree-sku">CON-ORK-008</span>
                </div>
                <span class="bom-tree-type bom-tree-type-consumable">Consumable</span>
                <div class="bom-tree-quantity">
                  <span class="bom-tree-qty-value">4</span>
                  <span class="bom-tree-qty-unit">pcs</span>
                </div>
                <div class="bom-tree-stock bom-tree-stock-in-stock">
                  <span class="bom-tree-stock-dot"></span>
                  <span class="bom-tree-stock-text">In Stock (580)</span>
                </div>
                <div class="bom-tree-cost">
                  <span class="bom-tree-cost-value">$3.20</span>
                  <span class="bom-tree-cost-label">per unit</span>
                </div>
              </div>
            </li>
          </ul>
        </li>
        <li class="bom-tree-node">
          <div class="bom-tree-item">
            <div class="bom-tree-toggle bom-tree-toggle-empty"></div>
            <div class="bom-tree-level">
              <div class="bom-tree-level-bar bom-tree-level-bar-l1"></div>
            </div>
            <div class="bom-tree-icon bom-tree-icon-raw">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="2" width="20" height="20" rx="2"/></svg>
            </div>
            <div class="bom-tree-details">
              <span class="bom-tree-name">Actuator Spring - Heavy Duty</span>
              <span class="bom-tree-sku">RAW-SPR-HD7</span>
            </div>
            <span class="bom-tree-type bom-tree-type-raw">Raw</span>
            <div class="bom-tree-quantity">
              <span class="bom-tree-qty-value">2</span>
              <span class="bom-tree-qty-unit">pcs</span>
            </div>
            <div class="bom-tree-stock bom-tree-stock-out-of-stock">
              <span class="bom-tree-stock-dot"></span>
              <span class="bom-tree-stock-text">Out of Stock</span>
            </div>
            <div class="bom-tree-cost">
              <span class="bom-tree-cost-value">$18.75</span>
              <span class="bom-tree-cost-label">per unit</span>
            </div>
          </div>
        </li>
        <li class="bom-tree-node">
          <div class="bom-tree-item">
            <div class="bom-tree-toggle bom-tree-toggle-empty"></div>
            <div class="bom-tree-level">
              <div class="bom-tree-level-bar bom-tree-level-bar-l1"></div>
            </div>
            <div class="bom-tree-icon bom-tree-icon-packaging">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 16V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l7-4A2 2 0 0021 16z"/><path d="M3.27 6.96L12 12.01l8.73-5.05"/><path d="M12 22.08V12"/></svg>
            </div>
            <div class="bom-tree-details">
              <span class="bom-tree-name">Anti-Static Blister Pack</span>
              <span class="bom-tree-sku">PKG-ASB-020</span>
            </div>
            <span class="bom-tree-type bom-tree-type-packaging">Packaging</span>
            <div class="bom-tree-quantity">
              <span class="bom-tree-qty-value">1</span>
              <span class="bom-tree-qty-unit">pcs</span>
            </div>
            <div class="bom-tree-stock bom-tree-stock-in-stock">
              <span class="bom-tree-stock-dot"></span>
              <span class="bom-tree-stock-text">In Stock (300)</span>
            </div>
            <div class="bom-tree-cost">
              <span class="bom-tree-cost-value">$1.80</span>
              <span class="bom-tree-cost-label">per unit</span>
            </div>
          </div>
        </li>
      </ul>
    </li>
  </ul>
  <div class="bom-tree-footer">
    <div class="bom-tree-summary">
      <div class="bom-tree-summary-item">
        <span class="bom-tree-summary-label">Total Parts</span>
        <span class="bom-tree-summary-value">5</span>
      </div>
      <div class="bom-tree-summary-item">
        <span class="bom-tree-summary-label">Total Cost</span>
        <span class="bom-tree-summary-value">$284.50</span>
      </div>
    </div>
  </div>
</div>

Requires: ux.min.css

<div class="overflow-hidden bg-base-100 border border-base-300 rounded-box">
  <div class="flex items-center gap-4 p-4 border-b border-base-300 bg-base-200">
    <span class="flex-1 font-semibold text-lg">ERPlora Hydraulic Valve Assembly</span>
    <div class="flex items-center gap-1">
      <button class="inline-flex items-center justify-center w-9 h-9 rounded-field bg-transparent text-base-content/60 hover:bg-base-300 hover:text-base-content">
        <svg class="w-4.5 h-4.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg>
      </button>
    </div>
  </div>
  <div class="flex items-center gap-2 px-4 py-2 border-b border-base-300">
    <input class="flex-1 text-sm h-9 px-2 border border-base-300 rounded-field bg-base-100 outline-none focus:border-primary" type="text" placeholder="Search components...">
  </div>
  <ul class="list-none m-0 p-0">
    <li>
      <div class="relative flex items-center gap-2 min-h-12 px-4 py-2 border-b border-base-300 cursor-pointer bg-primary/10">
        <svg class="w-3.5 h-3.5 text-base-content/40 rotate-90 shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
        <div class="flex items-center justify-center shrink-0 w-8 h-8 rounded-field bg-success/10 text-success">
          <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 16V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l7-4A2 2 0 0021 16z"/></svg>
        </div>
        <div class="flex-1 min-w-0 flex flex-col gap-0.5">
          <span class="font-medium truncate">Hydraulic Valve Assembly</span>
          <span class="text-xs font-mono text-base-content/40">FIN-HVA-001</span>
        </div>
        <span class="inline-flex items-center shrink-0 text-[0.6875rem] font-semibold uppercase h-5 px-1 rounded-field tracking-wide bg-success/10 text-success">Finished</span>
        <div class="flex items-baseline shrink-0 gap-1 min-w-[70px] justify-end">
          <span class="font-semibold tabular-nums">1</span>
          <span class="text-xs uppercase text-base-content/40">unit</span>
        </div>
        <div class="flex flex-col items-end shrink-0 min-w-[80px] px-2 py-1 rounded-field bg-primary/10">
          <span class="font-semibold tabular-nums text-primary">$284.50</span>
          <span class="text-xs text-base-content/40">total</span>
        </div>
      </div>
      <!-- Nested children would continue the same pattern with added left padding -->
    </li>
  </ul>
  <div class="flex items-center justify-between gap-4 p-4 border-t border-base-300 bg-base-200">
    <div class="flex gap-6">
      <div class="flex flex-col gap-0.5">
        <span class="text-xs uppercase text-base-content/40 tracking-wide">Total Parts</span>
        <span class="font-semibold text-lg tabular-nums">5</span>
      </div>
      <div class="flex flex-col gap-0.5">
        <span class="text-xs uppercase text-base-content/40 tracking-wide">Total Cost</span>
        <span class="font-semibold text-lg tabular-nums">$284.50</span>
      </div>
    </div>
  </div>
</div>

Requires: tw.min.css

// Toggle tree node expand/collapse
document.querySelectorAll('.bom-tree-toggle').forEach(toggle => {
  toggle.addEventListener('click', (e) => {
    e.stopPropagation();
    toggle.classList.toggle('bom-tree-toggle-expanded');
    const node = toggle.closest('.bom-tree-node');
    const nested = node.querySelector(':scope > .bom-tree-list-nested');
    if (nested) nested.style.display =
      nested.style.display === 'none' ? '' : 'none';
  });
});

// Search filter
const searchInput = document.querySelector('.bom-tree-search-input');
searchInput?.addEventListener('input', (e) => {
  const query = e.target.value.toLowerCase();
  document.querySelectorAll('.bom-tree-item').forEach(item => {
    const name = item.querySelector('.bom-tree-name')?.textContent.toLowerCase();
    const sku = item.querySelector('.bom-tree-sku')?.textContent.toLowerCase();
    const match = name?.includes(query) || sku?.includes(query);
    item.closest('.bom-tree-node').style.display = match ? '' : 'none';
  });
});

Type Badges and Stock Indicators

Preview

Material Type Badges

Raw Sub-Assy Finished Consumable Packaging

Stock Indicators

In Stock (580)

Low Stock (12)

Out of Stock

Cost Display

$45.00 per unit

$284.50 total

<div style="display: flex; flex-direction: column; gap: 1.5rem;">
  <!-- Type Badges -->
  <div>
    <p style="margin: 0 0 0.5rem; font-weight: 600; font-size: 0.875rem;">Material Type Badges</p>
    <div style="display: flex; flex-wrap: wrap; gap: 0.5rem;">
      <span class="bom-tree-type bom-tree-type-raw">Raw</span>
      <span class="bom-tree-type bom-tree-type-subassembly">Sub-Assy</span>
      <span class="bom-tree-type bom-tree-type-finished">Finished</span>
      <span class="bom-tree-type bom-tree-type-consumable">Consumable</span>
      <span class="bom-tree-type bom-tree-type-packaging">Packaging</span>
    </div>
  </div>
  <!-- Stock Indicators -->
  <div>
    <p style="margin: 0 0 0.5rem; font-weight: 600; font-size: 0.875rem;">Stock Indicators</p>
    <div style="display: flex; flex-wrap: wrap; gap: 1rem;">
      <div class="bom-tree-stock bom-tree-stock-in-stock">
        <span class="bom-tree-stock-dot"></span>
        <span class="bom-tree-stock-text">In Stock (580)</span>
      </div>
      <div class="bom-tree-stock bom-tree-stock-low-stock">
        <span class="bom-tree-stock-dot"></span>
        <span class="bom-tree-stock-text">Low Stock (12)</span>
      </div>
      <div class="bom-tree-stock bom-tree-stock-out-of-stock">
        <span class="bom-tree-stock-dot"></span>
        <span class="bom-tree-stock-text">Out of Stock</span>
      </div>
    </div>
  </div>
  <!-- Cost Display -->
  <div>
    <p style="margin: 0 0 0.5rem; font-weight: 600; font-size: 0.875rem;">Cost Display</p>
    <div style="display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start;">
      <div class="bom-tree-cost">
        <span class="bom-tree-cost-value">$45.00</span>
        <span class="bom-tree-cost-label">per unit</span>
      </div>
      <div class="bom-tree-cost bom-tree-cost-total">
        <span class="bom-tree-cost-value">$284.50</span>
        <span class="bom-tree-cost-label">total</span>
      </div>
    </div>
  </div>
</div>

Requires: ux.min.css

<div class="flex flex-col gap-6">
  <!-- Type Badges -->
  <div>
    <p class="m-0 mb-2 font-semibold text-sm">Material Type Badges</p>
    <div class="flex flex-wrap gap-2">
      <span class="inline-flex items-center shrink-0 text-[0.6875rem] font-semibold uppercase h-5 px-1 rounded-field tracking-wide bg-amber-500/10 text-amber-500">Raw</span>
      <span class="inline-flex items-center shrink-0 text-[0.6875rem] font-semibold uppercase h-5 px-1 rounded-field tracking-wide bg-blue-500/10 text-blue-500">Sub-Assy</span>
      <span class="inline-flex items-center shrink-0 text-[0.6875rem] font-semibold uppercase h-5 px-1 rounded-field tracking-wide bg-green-500/10 text-green-500">Finished</span>
      <span class="inline-flex items-center shrink-0 text-[0.6875rem] font-semibold uppercase h-5 px-1 rounded-field tracking-wide bg-purple-500/10 text-purple-500">Consumable</span>
      <span class="inline-flex items-center shrink-0 text-[0.6875rem] font-semibold uppercase h-5 px-1 rounded-field tracking-wide bg-gray-500/10 text-gray-500">Packaging</span>
    </div>
  </div>
  <!-- Stock Indicators -->
  <div>
    <p class="m-0 mb-2 font-semibold text-sm">Stock Indicators</p>
    <div class="flex flex-wrap gap-4">
      <div class="flex items-center gap-1">
        <span class="w-2 h-2 rounded-full bg-success shrink-0"></span>
        <span class="text-xs font-medium text-success">In Stock (580)</span>
      </div>
      <div class="flex items-center gap-1">
        <span class="w-2 h-2 rounded-full bg-warning shrink-0 animate-pulse"></span>
        <span class="text-xs font-medium text-warning">Low Stock (12)</span>
      </div>
      <div class="flex items-center gap-1">
        <span class="w-2 h-2 rounded-full bg-error shrink-0"></span>
        <span class="text-xs font-medium text-error">Out of Stock</span>
      </div>
    </div>
  </div>
  <!-- Cost Display -->
  <div>
    <p class="m-0 mb-2 font-semibold text-sm">Cost Display</p>
    <div class="flex flex-wrap gap-4 items-start">
      <div class="flex flex-col items-end">
        <span class="font-semibold tabular-nums">$45.00</span>
        <span class="text-xs text-base-content/40">per unit</span>
      </div>
      <div class="flex flex-col items-end px-2 py-1 rounded-field bg-primary/10">
        <span class="font-semibold tabular-nums text-primary">$284.50</span>
        <span class="text-xs text-base-content/40">total</span>
      </div>
    </div>
  </div>
</div>

Requires: tw.min.css

// No JS needed — type badges and stock indicators are CSS-only

Compact BOM Tree

Preview

ERPlora Cooling Fan Blade Set

Cooling Fan Assembly FIN-CFA-010
Finished
1 unit
- Aluminum Alloy Sheet 2mm RAW-ALS-002
  Raw
  0.8 m2
- Brushless DC Motor 12V RAW-BDM-12V
  Raw
  1 pcs
- M3 Hex Bolts (pack of 10) CON-M3H-010
  Consumable
  1 pack

<div class="bom-tree bom-tree-bordered bom-tree-compact">
  <div class="bom-tree-header">
    <span class="bom-tree-title">ERPlora Cooling Fan Blade Set</span>
  </div>
  <ul class="bom-tree-list">
    <li class="bom-tree-node">
      <div class="bom-tree-item">
        <div class="bom-tree-toggle bom-tree-toggle-expanded">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
        </div>
        <div class="bom-tree-icon bom-tree-icon-finished">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 16V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l7-4A2 2 0 0021 16z"/></svg>
        </div>
        <div class="bom-tree-details">
          <span class="bom-tree-name">Cooling Fan Assembly</span>
          <span class="bom-tree-sku">FIN-CFA-010</span>
        </div>
        <span class="bom-tree-type bom-tree-type-finished">Finished</span>
        <div class="bom-tree-quantity">
          <span class="bom-tree-qty-value">1</span>
          <span class="bom-tree-qty-unit">unit</span>
        </div>
      </div>
      <ul class="bom-tree-list bom-tree-list-nested">
        <li class="bom-tree-node">
          <div class="bom-tree-item">
            <div class="bom-tree-toggle bom-tree-toggle-empty"></div>
            <div class="bom-tree-icon bom-tree-icon-raw">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="2" width="20" height="20" rx="2"/></svg>
            </div>
            <div class="bom-tree-details">
              <span class="bom-tree-name">Aluminum Alloy Sheet 2mm</span>
              <span class="bom-tree-sku">RAW-ALS-002</span>
            </div>
            <span class="bom-tree-type bom-tree-type-raw">Raw</span>
            <div class="bom-tree-quantity">
              <span class="bom-tree-qty-value">0.8</span>
              <span class="bom-tree-qty-unit">m2</span>
            </div>
          </div>
        </li>
        <li class="bom-tree-node">
          <div class="bom-tree-item">
            <div class="bom-tree-toggle bom-tree-toggle-empty"></div>
            <div class="bom-tree-icon bom-tree-icon-raw">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="2" width="20" height="20" rx="2"/></svg>
            </div>
            <div class="bom-tree-details">
              <span class="bom-tree-name">Brushless DC Motor 12V</span>
              <span class="bom-tree-sku">RAW-BDM-12V</span>
            </div>
            <span class="bom-tree-type bom-tree-type-raw">Raw</span>
            <div class="bom-tree-quantity">
              <span class="bom-tree-qty-value">1</span>
              <span class="bom-tree-qty-unit">pcs</span>
            </div>
          </div>
        </li>
        <li class="bom-tree-node">
          <div class="bom-tree-item">
            <div class="bom-tree-toggle bom-tree-toggle-empty"></div>
            <div class="bom-tree-icon bom-tree-icon-consumable">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/></svg>
            </div>
            <div class="bom-tree-details">
              <span class="bom-tree-name">M3 Hex Bolts (pack of 10)</span>
              <span class="bom-tree-sku">CON-M3H-010</span>
            </div>
            <span class="bom-tree-type bom-tree-type-consumable">Consumable</span>
            <div class="bom-tree-quantity">
              <span class="bom-tree-qty-value">1</span>
              <span class="bom-tree-qty-unit">pack</span>
            </div>
          </div>
        </li>
      </ul>
    </li>
  </ul>
</div>

Requires: ux.min.css

<!-- Use the semantic version with .bom-tree-compact class for compact mode.
     The compact variant reduces item height, padding, and icon sizes via CSS variables. -->

Requires: tw.min.css

// No JS needed — compact is a CSS-only size variant

Empty State

Preview

New Product BOM

No components added

Start building your bill of materials by adding raw materials and sub-assemblies.

<div class="bom-tree bom-tree-bordered">
  <div class="bom-tree-header">
    <span class="bom-tree-title">New Product BOM</span>
  </div>
  <div class="bom-tree-empty">
    <svg class="bom-tree-empty-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
      <path d="M21 16V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l7-4A2 2 0 0021 16z"/>
      <path d="M3.27 6.96L12 12.01l8.73-5.05"/>
      <path d="M12 22.08V12"/>
    </svg>
    <p class="bom-tree-empty-title">No components added</p>
    <p>Start building your bill of materials by adding raw materials and sub-assemblies.</p>
  </div>
</div>

Requires: ux.min.css

<div class="overflow-hidden bg-base-100 border border-base-300 rounded-box">
  <div class="flex items-center gap-4 p-4 border-b border-base-300 bg-base-200">
    <span class="flex-1 font-semibold text-lg">New Product BOM</span>
  </div>
  <div class="flex flex-col items-center justify-center text-center py-10 px-6 text-base-content/40">
    <svg class="w-16 h-16 opacity-50 mb-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
      <path d="M21 16V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l7-4A2 2 0 0021 16z"/>
      <path d="M3.27 6.96L12 12.01l8.73-5.05"/>
      <path d="M12 22.08V12"/>
    </svg>
    <p class="font-semibold text-lg text-base-content/60 mb-1">No components added</p>
    <p class="text-sm m-0">Start building your bill of materials by adding raw materials and sub-assemblies.</p>
  </div>
</div>

Requires: tw.min.css

// No JS needed — empty state is CSS-only

Classes Reference

Class	Description
`.bom-tree`	Root container with CSS variables
`.bom-tree-bordered`	Adds outer border to container
`.bom-tree-sm`	Small size variant (40px rows)
`.bom-tree-lg`	Large size variant (56px rows)
`.bom-tree-compact`	Compact variant (36px rows, smaller icons)
`.bom-tree-header`	Header bar with title and actions
`.bom-tree-title`	Header title text
`.bom-tree-actions`	Action buttons container
`.bom-tree-action`	Individual action button (36x36)
`.bom-tree-search`	Search bar container
`.bom-tree-search-input`	Search text input
`.bom-tree-list`	Unstyled list for tree nodes
`.bom-tree-list-nested`	Indented child list (uses --bom-indent)
`.bom-tree-node`	Single tree node (li)
`.bom-tree-item`	Item row with hover/active states
`.bom-tree-item-selected`	Selected item highlight
`.bom-tree-item-highlight`	Warning-colored highlight (search match)
`.bom-tree-item-dragging`	Opacity reduction during drag
`.bom-tree-item-drag-over`	Dashed outline for drop target
`.bom-tree-toggle`	Expand/collapse arrow
`.bom-tree-toggle-expanded`	Rotates arrow 90 degrees
`.bom-tree-toggle-empty`	Invisible toggle for leaf nodes
`.bom-tree-level`	Level depth indicator container
`.bom-tree-level-bar`	Colored bar for depth level
`.bom-tree-level-bar-l1` to `.bom-tree-level-bar-l5`	Level-specific colors (primary, success, warning, error, accent)
`.bom-tree-icon`	Item icon container (32x32)
`.bom-tree-icon-raw`	Amber icon for raw materials
`.bom-tree-icon-subassembly`	Blue icon for sub-assemblies
`.bom-tree-icon-finished`	Green icon for finished goods
`.bom-tree-icon-consumable`	Purple icon for consumables
`.bom-tree-icon-packaging`	Gray icon for packaging
`.bom-tree-details`	Name and SKU text container
`.bom-tree-name`	Item name (truncated)
`.bom-tree-sku`	Monospace SKU code
`.bom-tree-type`	Type badge base class
`.bom-tree-type-raw`	Amber type badge
`.bom-tree-type-subassembly`	Blue type badge
`.bom-tree-type-finished`	Green type badge
`.bom-tree-type-consumable`	Purple type badge
`.bom-tree-type-packaging`	Gray type badge
`.bom-tree-quantity`	Quantity display container
`.bom-tree-qty-value`	Numeric quantity value
`.bom-tree-qty-unit`	Unit label (kg, pcs, etc.)
`.bom-tree-stock`	Stock indicator container
`.bom-tree-stock-in-stock`	Green stock indicator
`.bom-tree-stock-low-stock`	Warning stock with pulsing dot
`.bom-tree-stock-out-of-stock`	Red out-of-stock indicator
`.bom-tree-cost`	Cost display container
`.bom-tree-cost-value`	Cost numeric value
`.bom-tree-cost-label`	Cost description label
`.bom-tree-cost-total`	Highlighted total cost with primary background
`.bom-tree-footer`	Footer bar with summary
`.bom-tree-summary`	Summary stats container
`.bom-tree-empty`	Centered empty state container
`.bom-tree-empty-icon`	Large icon in empty state
`.bom-tree-empty-title`	Empty state heading