Tree

src
- components
  - Button.astro
  - Card.astro
- index.ts

<Tree>
<TreeItem defaultOpen>
  <TreeItemContent>
    <TreeItemTrigger />
    <span>src</span>
  </TreeItemContent>
  <TreeItemChildren>
    <TreeItem defaultOpen>
      <TreeItemContent>
        <TreeItemTrigger />
        <span>components</span>
      </TreeItemContent>
      <TreeItemChildren>
        <TreeItem>
          <TreeItemContent class="ml-6">
            <File class="size-4" />
            <span>Button.astro</span>
          </TreeItemContent>
        </TreeItem>
        <TreeItem>
          <TreeItemContent class="ml-6">
            <File class="size-4" />
            <span>Card.astro</span>
          </TreeItemContent>
        </TreeItem>
      </TreeItemChildren>
    </TreeItem>
    <TreeItem>
      <TreeItemContent>
        <FileText class="size-4" />
        <span>index.ts</span>
      </TreeItemContent>
    </TreeItem>
  </TreeItemChildren>
</TreeItem>
</Tree>

Installation

npx bearnie add tree

import Tree from "@/components/ui/tree/Tree.astro";
import TreeItem from "@/components/ui/tree/TreeItem.astro";
import TreeItemTrigger from "@/components/ui/tree/TreeItemTrigger.astro";
import TreeItemContent from "@/components/ui/tree/TreeItemContent.astro";
import TreeItemChildren from "@/components/ui/tree/TreeItemChildren.astro";

Usage

import {
Tree,
TreeItem,
TreeItemTrigger,
TreeItemContent,
TreeItemChildren,
} from "@/components/ui/tree"

<Tree>
<TreeItem>
  <TreeItemContent>
    <TreeItemTrigger />
    <span>Parent Item</span>
  </TreeItemContent>
  <TreeItemChildren>
    <TreeItem>
      <TreeItemContent class="ml-6">Child Item</TreeItemContent>
    </TreeItem>
  </TreeItemChildren>
</TreeItem>
</Tree>

Examples

Simple list

Documents
- Resume.pdf
- Cover Letter.docx
Images
- photo.jpg

<Tree>
<TreeItem>
  <TreeItemContent>
    <TreeItemTrigger />
    <span>Documents</span>
  </TreeItemContent>
  <TreeItemChildren>
    <TreeItem>
      <TreeItemContent class="ml-6">
        <File class="size-4" />
        <span>Resume.pdf</span>
      </TreeItemContent>
    </TreeItem>
    <TreeItem>
      <TreeItemContent class="ml-6">
        <File class="size-4" />
        <span>Cover Letter.docx</span>
      </TreeItemContent>
    </TreeItem>
  </TreeItemChildren>
</TreeItem>
<TreeItem>
  <TreeItemContent>
    <TreeItemTrigger />
    <span>Images</span>
  </TreeItemContent>
  <TreeItemChildren>
    <TreeItem>
      <TreeItemContent class="ml-6">
        <File class="size-4" />
        <span>photo.jpg</span>
      </TreeItemContent>
    </TreeItem>
  </TreeItemChildren>
</TreeItem>
</Tree>

Default expanded

Open by default
- Visible child

<Tree>
<TreeItem defaultOpen>
  <TreeItemContent>
    <TreeItemTrigger />
    <span>Open by default</span>
  </TreeItemContent>
  <TreeItemChildren>
    <TreeItem>
      <TreeItemContent class="ml-6">
        <File class="size-4" />
        <span>Visible child</span>
      </TreeItemContent>
    </TreeItem>
  </TreeItemChildren>
</TreeItem>
</Tree>

Props

Root container for the tree structure.

Prop	Type	Default	Description
class	string	-	Additional CSS classes

TreeItem

Individual tree node that can have children.

Prop	Type	Default	Description
defaultOpen	boolean	false	Whether children are initially visible
class	string	-	Additional CSS classes

TreeItemTrigger

Expand/collapse button with folder icons that change based on state.

Prop	Type	Default	Description
showFolderIcon	boolean	true	Show folder/folder-open icons
class	string	-	Additional CSS classes

TreeItemContent

The visible content/label of the tree item.

TreeItemChildren

Container for nested tree items. Renders as hidden until parent is expanded.

Arrow Right: Expand collapsed item
Arrow Left: Collapse expanded item
Tab: Move focus between items

Tree

Installation

Usage

Examples

Simple list

Default expanded

Props

Tree

TreeItem

TreeItemTrigger

TreeItemContent

TreeItemChildren

Keyboard navigation