Gumtree UI

ChannelTree

The full left sidebar container for the channel tree — 250px wide, scrollable, with a footer slot.

Import

import { ChannelTree } from "@gumtree/ui/chat/ChannelTree";

Props

PropTypeDefaultDescription
footerComponentChildren-Footer content (rendered below the scrollable area)
childrenComponentChildren-Tree content (scrollable)

Examples

Composed Sidebar

ChannelTree with sections, nodes, channels, DMs, and a footer.

🏢necessary
Channels+ New
#general
#ci
Repositories
📦example-app/
!channel
💬Direct Messages
alice
carol
🌿 EucalyptIRCd
<ChannelTree
  footer={<TreeFooter>🌿 <strong class="text-[var(--text-muted)]">EucalyptIRCd</strong></TreeFooter>}>
  <TreeNode label="necessary" iconEmoji="🏢" bold>
    <TreeSection label="Channels" action="+ New" />
    <ChannelRow type="custom" label="general" depth={1} />
    <ChannelRow type="custom" label="ci" depth={1} />
    <TreeSection label="Repositories" />
    <TreeNode label="example-app/" iconEmoji="📦" depth={1}>
      <ChannelRow type="auto" label="channel" italic depth={2} active />
    </TreeNode>
  </TreeNode>
  <TreeNode label="Direct Messages" iconEmoji="💬">
    <DMRow name="alice" status="online" />
    <DMRow name="carol" status="away" />
  </TreeNode>
</ChannelTree>