This is the llms.txt documentation for the "trees" directory of the Origin UI - Svelte project.
# "trees" directory
> A collection of production-ready, accessible UI components built with Svelte 5 and Tailwind CSS. These components are designed to be drop-in solutions for rapidly building modern web applications.
This documentation covers 8 components, each following best practices for accessibility, performance, and type safety.
## Components
## tree-01
> A type-safe, accessible tree-01 component for building modern UIs. This component is part of the trees collection.
### Core Information
- **Component ID**: `tree-01`
- **Location**: `/src/lib/components/trees/tree-01.svelte`
- **Type**: UI Component
### Usage
```svelte
Full component implementation:
```svelte
{#each tree.current.getItems() as item (item.getId())}
{item.getItemData().name}
{/each}
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/trees/tree-01.svelte)
## tree-02
> A type-safe, accessible tree-02 component for building modern UIs. This component is part of the trees collection.
### Core Information
- **Component ID**: `tree-02`
- **Location**: `/src/lib/components/trees/tree-02.svelte`
- **Type**: UI Component
### Usage
```svelte
Full component implementation:
```svelte
{#each tree.current.getItems() as item (item.getId())}
{/each}
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/trees/tree-02.svelte)
## tree-03
> A type-safe, accessible tree-03 component for building modern UIs. This component is part of the trees collection.
### Core Information
- **Component ID**: `tree-03`
- **Location**: `/src/lib/components/trees/tree-03.svelte`
- **Type**: UI Component
### Usage
```svelte
### Dependencies
Required packages and components:
- [`@lucide/svelte`](https://github.com/lucide-icons/lucide)
Full component implementation:
```svelte
{#each tree.current.getItems() as item (item.getId())}
{#if item.isFolder()}
{#if item.isExpanded()}
{:else}
{/if}
{:else}
{/if}
{item.getItemName()}
{/each}
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/trees/tree-03.svelte)
## tree-04
> A type-safe, accessible tree-04 component for building modern UIs. This component is part of the trees collection.
### Core Information
- **Component ID**: `tree-04`
- **Location**: `/src/lib/components/trees/tree-04.svelte`
- **Type**: UI Component
### Usage
```svelte
### Dependencies
Required packages and components:
- [`@lucide/svelte`](https://github.com/lucide-icons/lucide)
Full component implementation:
```svelte
{#each tree.current.getItems() as item (item.getId())}
{#if item.isFolder()}
{#if item.isExpanded()}
{:else}
{/if}
{:else}
{/if}
{item.getItemName()}
{/each}
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/trees/tree-04.svelte)
## tree-05
> A type-safe, accessible tree-05 component for building modern UIs. This component is part of the trees collection.
### Core Information
- **Component ID**: `tree-05`
- **Location**: `/src/lib/components/trees/tree-05.svelte`
- **Type**: UI Component
### Usage
```svelte
### Dependencies
Required packages and components:
- [`@lucide/svelte`](https://github.com/lucide-icons/lucide)
Full component implementation:
```svelte
{#each tree.current.getItems() as item (item.getId())}
{#if item.isFolder()}
{#if item.isExpanded()}
{:else}
{/if}
{/if}
{item.getItemName()}
{/each}
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/trees/tree-05.svelte)
## tree-06
> A type-safe, accessible tree-06 component for building modern UIs. This component is part of the trees collection.
### Core Information
- **Component ID**: `tree-06`
- **Location**: `/src/lib/components/trees/tree-06.svelte`
- **Type**: UI Component
### Usage
```svelte
### Dependencies
Required packages and components:
- [`@lucide/svelte`](https://github.com/lucide-icons/lucide)
Full component implementation:
```svelte
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/trees/tree-06.svelte)
## tree-07
> A type-safe, accessible tree-07 component for building modern UIs. This component is part of the trees collection.
### Core Information
- **Component ID**: `tree-07`
- **Location**: `/src/lib/components/trees/tree-07.svelte`
- **Type**: UI Component
### Usage
```svelte
### Dependencies
Required packages and components:
- [`@lucide/svelte`](https://github.com/lucide-icons/lucide)
Full component implementation:
```svelte
{#each tree.current.getItems() as item (item.getId())}
{#if item.isFolder()}
{#if item.isExpanded()}
{:else}
{/if}
{/if}
{item.getItemName()}
{/each}
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/trees/tree-07.svelte)
## tree-08
> A type-safe, accessible tree-08 component for building modern UIs. This component is part of the trees collection.
### Core Information
- **Component ID**: `tree-08`
- **Location**: `/src/lib/components/trees/tree-08.svelte`
- **Type**: UI Component
### Usage
```svelte
### Dependencies
Required packages and components:
- [`@lucide/svelte`](https://github.com/lucide-icons/lucide)
Full component implementation:
```svelte
{#if searchValue && filteredItems.length === 0}
No items found for "{searchValue}"
{:else}
{#each tree.current.getItems() as item (item.getId())}
{@const isVisible = shouldShowItem(item.getId())}
{#if item.isFolder()}
{#if item.isExpanded()}
{:else}
{/if}
{/if}
{item.getItemName()}
{/each}
{/if}
Tree with filtering ∙
API
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/trees/tree-08.svelte)