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

Usage

import {
  Tree,
  TreeItem,
  TreeItemTrigger,
  TreeItemContent,
  TreeItemChildren,
} from "@/components/bearnie/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