Tree

Display hierarchical data in a tree structure with expandable/collapsible nodes.

Installation

Import

import { Tree } from '@svelte-atoms/core/tree';

Preset Configuration

Customize the tree appearance using presets

You can customize the default styles for Tree components by defining presets in your configuration:

Examples

Explore different tree variations

Basic Tree

Collapsible tree structure

Documents

Resume.pdf

CoverLetter.docx

Code

<script lang="ts">
  import { Tree } from '@svelte-atoms/core/tree';
</script>

<Tree.Root open>
  <Tree.Header>Documents</Tree.Header>
  <Tree.Body>
    <div>Resume.pdf</div>
    <div>CoverLetter.docx</div>
  </Tree.Body>
</Tree.Root>

Nested Tree

Multiple levels of nesting with expandable sections

src

components

Button.svelte

Input.svelte

Card.svelte

utils

helpers.ts

validators.ts

app.ts

Code

<script lang="ts">
  import { Tree } from '@svelte-atoms/core/tree';
</script>

<Tree.Root open>
  <Tree.Header>src</Tree.Header>
  <Tree.Body>
    <Tree.Root open>
      <Tree.Header>components</Tree.Header>
      <Tree.Body>
        <div>Button.svelte</div>
        <div>Input.svelte</div>
      </Tree.Body>
    </Tree.Root>
    <Tree.Root open>
      <Tree.Header>utils</Tree.Header>
      <Tree.Body>
        <div>helpers.ts</div>
        <div>validators.ts</div>
      </Tree.Body>
    </Tree.Root>
    <div>app.ts</div>
  </Tree.Body>
</Tree.Root>

API Reference

Tree.Root Props

Prop

Type

Default

Description

open

boolean

false

Controls whether the tree is expanded (bindable)

disabled

boolean

false

Whether the tree is disabled

class

string

Additional CSS classes

children

Snippet

Tree content (Header and Body components)

Tree.Header Props

Prop

Type

Default

Description

class

string

Additional CSS classes

children

Snippet

Header content (clickable label)

onpointerdown

function

Pointer down event handler

Tree.Body Props

Prop

Type

Default

Description

class

string

Additional CSS classes

children

Snippet

Body content (nested trees or items)

Accessibility

Built-in Accessibility Features

• ARIA tree role
• Keyboard navigation (Arrow keys)
• aria-expanded state
• Focus management
• Screen reader friendly

Tooltip

Virtual