Tree view

Style

Semantic colors, density, and max-width via modifier classes on the tree view root.

Hex doc

Phoenix

Preview

lib

tree_view.ex

tree_view_demo.ex

test

tree_view_test.exs

mix.exs

    <.tree_view class="tree-view max-w-xs" expanded_value={styling_expanded()} value={styling_value()} items={styling_items()}>
  <:branch_indicator><.heroicon name="hero-chevron-right" class="icon" /></:branch_indicator>
</.tree_view>

Semantic

Use class="ui-{role}" to set the semantic palette of a tree view.

Available options: accent, alert, brand, info, success

lib

tree_view.ex

tree_view_demo.ex

test

tree_view_test.exs

mix.exs

lib

tree_view.ex

tree_view_demo.ex

test

tree_view_test.exs

mix.exs

lib

tree_view.ex

tree_view_demo.ex

test

tree_view_test.exs

mix.exs

lib

tree_view.ex

tree_view_demo.ex

test

tree_view_test.exs

mix.exs

lib

tree_view.ex

tree_view_demo.ex

test

tree_view_test.exs

mix.exs

lib

tree_view.ex

tree_view_demo.ex

test

tree_view_test.exs

mix.exs

    <.tree_view class="tree-view max-w-xs" items={Corex.Tree.new([
      %{label: "lib", value: "lib", children: [
        %{label: "tree_view.ex", value: "lib-tree-view-ex"},
        %{label: "tree_view_demo.ex", value: "lib-tree-view-demo-ex"}
      ]},
      %{label: "test", value: "test", children: [
        %{label: "tree_view_test.exs", value: "test-tree-view-test-exs"}
      ]},
      %{label: "mix.exs", value: "mix-exs"}
    ])}>
  <:branch_indicator><.heroicon name="hero-chevron-right" class="icon" /></:branch_indicator>
</.tree_view>
<.tree_view class="tree-view ui-accent max-w-xs" items={Corex.Tree.new([
      %{label: "lib", value: "lib", children: [
        %{label: "tree_view.ex", value: "lib-tree-view-ex"},
        %{label: "tree_view_demo.ex", value: "lib-tree-view-demo-ex"}
      ]},
      %{label: "test", value: "test", children: [
        %{label: "tree_view_test.exs", value: "test-tree-view-test-exs"}
      ]},
      %{label: "mix.exs", value: "mix-exs"}
    ])}>
  <:branch_indicator><.heroicon name="hero-chevron-right" class="icon" /></:branch_indicator>
</.tree_view>
<.tree_view class="tree-view ui-brand max-w-xs" items={Corex.Tree.new([
      %{label: "lib", value: "lib", children: [
        %{label: "tree_view.ex", value: "lib-tree-view-ex"},
        %{label: "tree_view_demo.ex", value: "lib-tree-view-demo-ex"}
      ]},
      %{label: "test", value: "test", children: [
        %{label: "tree_view_test.exs", value: "test-tree-view-test-exs"}
      ]},
      %{label: "mix.exs", value: "mix-exs"}
    ])}>
  <:branch_indicator><.heroicon name="hero-chevron-right" class="icon" /></:branch_indicator>
</.tree_view>
<.tree_view class="tree-view ui-info max-w-xs" items={Corex.Tree.new([
      %{label: "lib", value: "lib", children: [
        %{label: "tree_view.ex", value: "lib-tree-view-ex"},
        %{label: "tree_view_demo.ex", value: "lib-tree-view-demo-ex"}
      ]},
      %{label: "test", value: "test", children: [
        %{label: "tree_view_test.exs", value: "test-tree-view-test-exs"}
      ]},
      %{label: "mix.exs", value: "mix-exs"}
    ])}>
  <:branch_indicator><.heroicon name="hero-chevron-right" class="icon" /></:branch_indicator>
</.tree_view>
<.tree_view class="tree-view ui-alert max-w-xs" items={Corex.Tree.new([
      %{label: "lib", value: "lib", children: [
        %{label: "tree_view.ex", value: "lib-tree-view-ex"},
        %{label: "tree_view_demo.ex", value: "lib-tree-view-demo-ex"}
      ]},
      %{label: "test", value: "test", children: [
        %{label: "tree_view_test.exs", value: "test-tree-view-test-exs"}
      ]},
      %{label: "mix.exs", value: "mix-exs"}
    ])}>
  <:branch_indicator><.heroicon name="hero-chevron-right" class="icon" /></:branch_indicator>
</.tree_view>
<.tree_view class="tree-view ui-success max-w-xs" items={Corex.Tree.new([
      %{label: "lib", value: "lib", children: [
        %{label: "tree_view.ex", value: "lib-tree-view-ex"},
        %{label: "tree_view_demo.ex", value: "lib-tree-view-demo-ex"}
      ]},
      %{label: "test", value: "test", children: [
        %{label: "tree_view_test.exs", value: "test-tree-view-test-exs"}
      ]},
      %{label: "mix.exs", value: "mix-exs"}
    ])}>
  <:branch_indicator><.heroicon name="hero-chevron-right" class="icon" /></:branch_indicator>
</.tree_view>

Size

Use class="ui-size-{size}" to set the size of a tree view.

Available options: xs, sm, md (default), lg, xl

lib

tree_view.ex

tree_view_demo.ex

test

tree_view_test.exs

mix.exs

lib

tree_view.ex

tree_view_demo.ex

test

tree_view_test.exs

mix.exs

lib

tree_view.ex

tree_view_demo.ex

test

tree_view_test.exs

mix.exs

lib

tree_view.ex

tree_view_demo.ex

test

tree_view_test.exs

mix.exs

    <.tree_view class="tree-view ui-size-sm max-w-xs" items={Corex.Tree.new([
      %{label: "lib", value: "lib", children: [
        %{label: "tree_view.ex", value: "lib-tree-view-ex"},
        %{label: "tree_view_demo.ex", value: "lib-tree-view-demo-ex"}
      ]},
      %{label: "test", value: "test", children: [
        %{label: "tree_view_test.exs", value: "test-tree-view-test-exs"}
      ]},
      %{label: "mix.exs", value: "mix-exs"}
    ])}>
  <:branch_indicator><.heroicon name="hero-chevron-right" class="icon" /></:branch_indicator>
</.tree_view>
<.tree_view class="tree-view ui-size-md max-w-xs" items={Corex.Tree.new([
      %{label: "lib", value: "lib", children: [
        %{label: "tree_view.ex", value: "lib-tree-view-ex"},
        %{label: "tree_view_demo.ex", value: "lib-tree-view-demo-ex"}
      ]},
      %{label: "test", value: "test", children: [
        %{label: "tree_view_test.exs", value: "test-tree-view-test-exs"}
      ]},
      %{label: "mix.exs", value: "mix-exs"}
    ])}>
  <:branch_indicator><.heroicon name="hero-chevron-right" class="icon" /></:branch_indicator>
</.tree_view>
<.tree_view class="tree-view ui-size-lg max-w-xs" items={Corex.Tree.new([
      %{label: "lib", value: "lib", children: [
        %{label: "tree_view.ex", value: "lib-tree-view-ex"},
        %{label: "tree_view_demo.ex", value: "lib-tree-view-demo-ex"}
      ]},
      %{label: "test", value: "test", children: [
        %{label: "tree_view_test.exs", value: "test-tree-view-test-exs"}
      ]},
      %{label: "mix.exs", value: "mix-exs"}
    ])}>
  <:branch_indicator><.heroicon name="hero-chevron-right" class="icon" /></:branch_indicator>
</.tree_view>
<.tree_view class="tree-view ui-size-xl max-w-xs" items={Corex.Tree.new([
      %{label: "lib", value: "lib", children: [
        %{label: "tree_view.ex", value: "lib-tree-view-ex"},
        %{label: "tree_view_demo.ex", value: "lib-tree-view-demo-ex"}
      ]},
      %{label: "test", value: "test", children: [
        %{label: "tree_view_test.exs", value: "test-tree-view-test-exs"}
      ]},
      %{label: "mix.exs", value: "mix-exs"}
    ])}>
  <:branch_indicator><.heroicon name="hero-chevron-right" class="icon" /></:branch_indicator>
</.tree_view>

Max width

Without max-w-*, width comes from component CSS. Default for tree-view: md (width: 100%).

Use class="max-w-{step}" to set the maximum width of a tree view root.

Available options: none, full, 9xs, 8xs, 7xs, 6xs, 5xs, 4xs, 3xs, 2xs, xs, sm, md (default), lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl, 7xl, 8xl, 9xl

default (md)

lib

tree_view.ex

tree_view_demo.ex

test

tree_view_test.exs

mix.exs

none

lib

tree_view.ex

tree_view_demo.ex

test

tree_view_test.exs

mix.exs

full

lib

tree_view.ex

tree_view_demo.ex

test

tree_view_test.exs

mix.exs

9xs

lib

tree_view.ex

tree_view_demo.ex

test

tree_view_test.exs

mix.exs

8xs

lib

tree_view.ex

tree_view_demo.ex

test

tree_view_test.exs

mix.exs

7xs

lib

tree_view.ex

tree_view_demo.ex

test

tree_view_test.exs

mix.exs

6xs

lib

tree_view.ex

tree_view_demo.ex

test

tree_view_test.exs

mix.exs

5xs

lib

tree_view.ex

tree_view_demo.ex

test

tree_view_test.exs

mix.exs

4xs

lib

tree_view.ex

tree_view_demo.ex

test

tree_view_test.exs

mix.exs

3xs

lib

tree_view.ex

tree_view_demo.ex

test

tree_view_test.exs

mix.exs

2xs

lib

tree_view.ex

tree_view_demo.ex

test

tree_view_test.exs

mix.exs

lib

tree_view.ex

tree_view_demo.ex

test

tree_view_test.exs

mix.exs

lib

tree_view.ex

tree_view_demo.ex

test

tree_view_test.exs

mix.exs

lib

tree_view.ex

tree_view_demo.ex

test

tree_view_test.exs

mix.exs

lib

tree_view.ex

tree_view_demo.ex

test

tree_view_test.exs

mix.exs

lib

tree_view.ex

tree_view_demo.ex

test

tree_view_test.exs

mix.exs

2xl

lib

tree_view.ex

tree_view_demo.ex

test

tree_view_test.exs

mix.exs

3xl

lib

tree_view.ex

tree_view_demo.ex

test

tree_view_test.exs

mix.exs

4xl

lib

tree_view.ex

tree_view_demo.ex

test

tree_view_test.exs

mix.exs

5xl

lib

tree_view.ex

tree_view_demo.ex

test

tree_view_test.exs

mix.exs

6xl

lib

tree_view.ex

tree_view_demo.ex

test

tree_view_test.exs

mix.exs

7xl

lib

tree_view.ex

tree_view_demo.ex

test

tree_view_test.exs

mix.exs

8xl

lib

tree_view.ex

tree_view_demo.ex

test

tree_view_test.exs

mix.exs

9xl

lib

tree_view.ex

tree_view_demo.ex

test

tree_view_test.exs

mix.exs

    <.tree_view class="tree-view" items={Corex.Tree.new([
      %{label: "lib", value: "lib", children: [
        %{label: "tree_view.ex", value: "lib-tree-view-ex"},
        %{label: "tree_view_demo.ex", value: "lib-tree-view-demo-ex"}
      ]},
      %{label: "test", value: "test", children: [
        %{label: "tree_view_test.exs", value: "test-tree-view-test-exs"}
      ]},
      %{label: "mix.exs", value: "mix-exs"}
    ])}>
  <:branch_indicator><.heroicon name="hero-chevron-right" class="icon" /></:branch_indicator>
</.tree_view>

<.tree_view class="tree-view max-w-none" items={Corex.Tree.new([
      %{label: "lib", value: "lib", children: [
        %{label: "tree_view.ex", value: "lib-tree-view-ex"},
        %{label: "tree_view_demo.ex", value: "lib-tree-view-demo-ex"}
      ]},
      %{label: "test", value: "test", children: [
        %{label: "tree_view_test.exs", value: "test-tree-view-test-exs"}
      ]},
      %{label: "mix.exs", value: "mix-exs"}
    ])}>
  <:branch_indicator><.heroicon name="hero-chevron-right" class="icon" /></:branch_indicator>
</.tree_view>

<.tree_view class="tree-view max-w-full" items={Corex.Tree.new([
      %{label: "lib", value: "lib", children: [
        %{label: "tree_view.ex", value: "lib-tree-view-ex"},
        %{label: "tree_view_demo.ex", value: "lib-tree-view-demo-ex"}
      ]},
      %{label: "test", value: "test", children: [
        %{label: "tree_view_test.exs", value: "test-tree-view-test-exs"}
      ]},
      %{label: "mix.exs", value: "mix-exs"}
    ])}>
  <:branch_indicator><.heroicon name="hero-chevron-right" class="icon" /></:branch_indicator>
</.tree_view>

<.tree_view class="tree-view max-w-9xs" items={Corex.Tree.new([
      %{label: "lib", value: "lib", children: [
        %{label: "tree_view.ex", value: "lib-tree-view-ex"},
        %{label: "tree_view_demo.ex", value: "lib-tree-view-demo-ex"}
      ]},
      %{label: "test", value: "test", children: [
        %{label: "tree_view_test.exs", value: "test-tree-view-test-exs"}
      ]},
      %{label: "mix.exs", value: "mix-exs"}
    ])}>
  <:branch_indicator><.heroicon name="hero-chevron-right" class="icon" /></:branch_indicator>
</.tree_view>

<.tree_view class="tree-view max-w-8xs" items={Corex.Tree.new([
      %{label: "lib", value: "lib", children: [
        %{label: "tree_view.ex", value: "lib-tree-view-ex"},
        %{label: "tree_view_demo.ex", value: "lib-tree-view-demo-ex"}
      ]},
      %{label: "test", value: "test", children: [
        %{label: "tree_view_test.exs", value: "test-tree-view-test-exs"}
      ]},
      %{label: "mix.exs", value: "mix-exs"}
    ])}>
  <:branch_indicator><.heroicon name="hero-chevron-right" class="icon" /></:branch_indicator>
</.tree_view>

<.tree_view class="tree-view max-w-7xs" items={Corex.Tree.new([
      %{label: "lib", value: "lib", children: [
        %{label: "tree_view.ex", value: "lib-tree-view-ex"},
        %{label: "tree_view_demo.ex", value: "lib-tree-view-demo-ex"}
      ]},
      %{label: "test", value: "test", children: [
        %{label: "tree_view_test.exs", value: "test-tree-view-test-exs"}
      ]},
      %{label: "mix.exs", value: "mix-exs"}
    ])}>
  <:branch_indicator><.heroicon name="hero-chevron-right" class="icon" /></:branch_indicator>
</.tree_view>

<.tree_view class="tree-view max-w-6xs" items={Corex.Tree.new([
      %{label: "lib", value: "lib", children: [
        %{label: "tree_view.ex", value: "lib-tree-view-ex"},
        %{label: "tree_view_demo.ex", value: "lib-tree-view-demo-ex"}
      ]},
      %{label: "test", value: "test", children: [
        %{label: "tree_view_test.exs", value: "test-tree-view-test-exs"}
      ]},
      %{label: "mix.exs", value: "mix-exs"}
    ])}>
  <:branch_indicator><.heroicon name="hero-chevron-right" class="icon" /></:branch_indicator>
</.tree_view>

<.tree_view class="tree-view max-w-5xs" items={Corex.Tree.new([
      %{label: "lib", value: "lib", children: [
        %{label: "tree_view.ex", value: "lib-tree-view-ex"},
        %{label: "tree_view_demo.ex", value: "lib-tree-view-demo-ex"}
      ]},
      %{label: "test", value: "test", children: [
        %{label: "tree_view_test.exs", value: "test-tree-view-test-exs"}
      ]},
      %{label: "mix.exs", value: "mix-exs"}
    ])}>
  <:branch_indicator><.heroicon name="hero-chevron-right" class="icon" /></:branch_indicator>
</.tree_view>

<.tree_view class="tree-view max-w-4xs" items={Corex.Tree.new([
      %{label: "lib", value: "lib", children: [
        %{label: "tree_view.ex", value: "lib-tree-view-ex"},
        %{label: "tree_view_demo.ex", value: "lib-tree-view-demo-ex"}
      ]},
      %{label: "test", value: "test", children: [
        %{label: "tree_view_test.exs", value: "test-tree-view-test-exs"}
      ]},
      %{label: "mix.exs", value: "mix-exs"}
    ])}>
  <:branch_indicator><.heroicon name="hero-chevron-right" class="icon" /></:branch_indicator>
</.tree_view>

<.tree_view class="tree-view max-w-3xs" items={Corex.Tree.new([
      %{label: "lib", value: "lib", children: [
        %{label: "tree_view.ex", value: "lib-tree-view-ex"},
        %{label: "tree_view_demo.ex", value: "lib-tree-view-demo-ex"}
      ]},
      %{label: "test", value: "test", children: [
        %{label: "tree_view_test.exs", value: "test-tree-view-test-exs"}
      ]},
      %{label: "mix.exs", value: "mix-exs"}
    ])}>
  <:branch_indicator><.heroicon name="hero-chevron-right" class="icon" /></:branch_indicator>
</.tree_view>

<.tree_view class="tree-view max-w-2xs" items={Corex.Tree.new([
      %{label: "lib", value: "lib", children: [
        %{label: "tree_view.ex", value: "lib-tree-view-ex"},
        %{label: "tree_view_demo.ex", value: "lib-tree-view-demo-ex"}
      ]},
      %{label: "test", value: "test", children: [
        %{label: "tree_view_test.exs", value: "test-tree-view-test-exs"}
      ]},
      %{label: "mix.exs", value: "mix-exs"}
    ])}>
  <:branch_indicator><.heroicon name="hero-chevron-right" class="icon" /></:branch_indicator>
</.tree_view>

<.tree_view class="tree-view max-w-xs" items={Corex.Tree.new([
      %{label: "lib", value: "lib", children: [
        %{label: "tree_view.ex", value: "lib-tree-view-ex"},
        %{label: "tree_view_demo.ex", value: "lib-tree-view-demo-ex"}
      ]},
      %{label: "test", value: "test", children: [
        %{label: "tree_view_test.exs", value: "test-tree-view-test-exs"}
      ]},
      %{label: "mix.exs", value: "mix-exs"}
    ])}>
  <:branch_indicator><.heroicon name="hero-chevron-right" class="icon" /></:branch_indicator>
</.tree_view>

<.tree_view class="tree-view max-w-sm" items={Corex.Tree.new([
      %{label: "lib", value: "lib", children: [
        %{label: "tree_view.ex", value: "lib-tree-view-ex"},
        %{label: "tree_view_demo.ex", value: "lib-tree-view-demo-ex"}
      ]},
      %{label: "test", value: "test", children: [
        %{label: "tree_view_test.exs", value: "test-tree-view-test-exs"}
      ]},
      %{label: "mix.exs", value: "mix-exs"}
    ])}>
  <:branch_indicator><.heroicon name="hero-chevron-right" class="icon" /></:branch_indicator>
</.tree_view>

<.tree_view class="tree-view max-w-md" items={Corex.Tree.new([
      %{label: "lib", value: "lib", children: [
        %{label: "tree_view.ex", value: "lib-tree-view-ex"},
        %{label: "tree_view_demo.ex", value: "lib-tree-view-demo-ex"}
      ]},
      %{label: "test", value: "test", children: [
        %{label: "tree_view_test.exs", value: "test-tree-view-test-exs"}
      ]},
      %{label: "mix.exs", value: "mix-exs"}
    ])}>
  <:branch_indicator><.heroicon name="hero-chevron-right" class="icon" /></:branch_indicator>
</.tree_view>

<.tree_view class="tree-view max-w-lg" items={Corex.Tree.new([
      %{label: "lib", value: "lib", children: [
        %{label: "tree_view.ex", value: "lib-tree-view-ex"},
        %{label: "tree_view_demo.ex", value: "lib-tree-view-demo-ex"}
      ]},
      %{label: "test", value: "test", children: [
        %{label: "tree_view_test.exs", value: "test-tree-view-test-exs"}
      ]},
      %{label: "mix.exs", value: "mix-exs"}
    ])}>
  <:branch_indicator><.heroicon name="hero-chevron-right" class="icon" /></:branch_indicator>
</.tree_view>

<.tree_view class="tree-view max-w-xl" items={Corex.Tree.new([
      %{label: "lib", value: "lib", children: [
        %{label: "tree_view.ex", value: "lib-tree-view-ex"},
        %{label: "tree_view_demo.ex", value: "lib-tree-view-demo-ex"}
      ]},
      %{label: "test", value: "test", children: [
        %{label: "tree_view_test.exs", value: "test-tree-view-test-exs"}
      ]},
      %{label: "mix.exs", value: "mix-exs"}
    ])}>
  <:branch_indicator><.heroicon name="hero-chevron-right" class="icon" /></:branch_indicator>
</.tree_view>

<.tree_view class="tree-view max-w-2xl" items={Corex.Tree.new([
      %{label: "lib", value: "lib", children: [
        %{label: "tree_view.ex", value: "lib-tree-view-ex"},
        %{label: "tree_view_demo.ex", value: "lib-tree-view-demo-ex"}
      ]},
      %{label: "test", value: "test", children: [
        %{label: "tree_view_test.exs", value: "test-tree-view-test-exs"}
      ]},
      %{label: "mix.exs", value: "mix-exs"}
    ])}>
  <:branch_indicator><.heroicon name="hero-chevron-right" class="icon" /></:branch_indicator>
</.tree_view>

<.tree_view class="tree-view max-w-3xl" items={Corex.Tree.new([
      %{label: "lib", value: "lib", children: [
        %{label: "tree_view.ex", value: "lib-tree-view-ex"},
        %{label: "tree_view_demo.ex", value: "lib-tree-view-demo-ex"}
      ]},
      %{label: "test", value: "test", children: [
        %{label: "tree_view_test.exs", value: "test-tree-view-test-exs"}
      ]},
      %{label: "mix.exs", value: "mix-exs"}
    ])}>
  <:branch_indicator><.heroicon name="hero-chevron-right" class="icon" /></:branch_indicator>
</.tree_view>

<.tree_view class="tree-view max-w-4xl" items={Corex.Tree.new([
      %{label: "lib", value: "lib", children: [
        %{label: "tree_view.ex", value: "lib-tree-view-ex"},
        %{label: "tree_view_demo.ex", value: "lib-tree-view-demo-ex"}
      ]},
      %{label: "test", value: "test", children: [
        %{label: "tree_view_test.exs", value: "test-tree-view-test-exs"}
      ]},
      %{label: "mix.exs", value: "mix-exs"}
    ])}>
  <:branch_indicator><.heroicon name="hero-chevron-right" class="icon" /></:branch_indicator>
</.tree_view>

<.tree_view class="tree-view max-w-5xl" items={Corex.Tree.new([
      %{label: "lib", value: "lib", children: [
        %{label: "tree_view.ex", value: "lib-tree-view-ex"},
        %{label: "tree_view_demo.ex", value: "lib-tree-view-demo-ex"}
      ]},
      %{label: "test", value: "test", children: [
        %{label: "tree_view_test.exs", value: "test-tree-view-test-exs"}
      ]},
      %{label: "mix.exs", value: "mix-exs"}
    ])}>
  <:branch_indicator><.heroicon name="hero-chevron-right" class="icon" /></:branch_indicator>
</.tree_view>

<.tree_view class="tree-view max-w-6xl" items={Corex.Tree.new([
      %{label: "lib", value: "lib", children: [
        %{label: "tree_view.ex", value: "lib-tree-view-ex"},
        %{label: "tree_view_demo.ex", value: "lib-tree-view-demo-ex"}
      ]},
      %{label: "test", value: "test", children: [
        %{label: "tree_view_test.exs", value: "test-tree-view-test-exs"}
      ]},
      %{label: "mix.exs", value: "mix-exs"}
    ])}>
  <:branch_indicator><.heroicon name="hero-chevron-right" class="icon" /></:branch_indicator>
</.tree_view>

<.tree_view class="tree-view max-w-7xl" items={Corex.Tree.new([
      %{label: "lib", value: "lib", children: [
        %{label: "tree_view.ex", value: "lib-tree-view-ex"},
        %{label: "tree_view_demo.ex", value: "lib-tree-view-demo-ex"}
      ]},
      %{label: "test", value: "test", children: [
        %{label: "tree_view_test.exs", value: "test-tree-view-test-exs"}
      ]},
      %{label: "mix.exs", value: "mix-exs"}
    ])}>
  <:branch_indicator><.heroicon name="hero-chevron-right" class="icon" /></:branch_indicator>
</.tree_view>

<.tree_view class="tree-view max-w-8xl" items={Corex.Tree.new([
      %{label: "lib", value: "lib", children: [
        %{label: "tree_view.ex", value: "lib-tree-view-ex"},
        %{label: "tree_view_demo.ex", value: "lib-tree-view-demo-ex"}
      ]},
      %{label: "test", value: "test", children: [
        %{label: "tree_view_test.exs", value: "test-tree-view-test-exs"}
      ]},
      %{label: "mix.exs", value: "mix-exs"}
    ])}>
  <:branch_indicator><.heroicon name="hero-chevron-right" class="icon" /></:branch_indicator>
</.tree_view>

<.tree_view class="tree-view max-w-9xl" items={Corex.Tree.new([
      %{label: "lib", value: "lib", children: [
        %{label: "tree_view.ex", value: "lib-tree-view-ex"},
        %{label: "tree_view_demo.ex", value: "lib-tree-view-demo-ex"}
      ]},
      %{label: "test", value: "test", children: [
        %{label: "tree_view_test.exs", value: "test-tree-view-test-exs"}
      ]},
      %{label: "mix.exs", value: "mix-exs"}
    ])}>
  <:branch_indicator><.heroicon name="hero-chevron-right" class="icon" /></:branch_indicator>
</.tree_view>