Tree
Hierarchical tree view with expand/collapse
packages/
ui/
cli/
feedback/
src/
routes/
+layout.svelte
+page.svelte
about/+page.svelte
lib/
components/
utils.ts
app.html
package.json
README.md
Accessibility
- Treat the component as presentational unless it exposes interactive affordances, and label any interactive affordances explicitly.
- Keep heading, reading, and focus order aligned with the surrounding content.
- Keep focus on the treeitem and follow the standard arrow-key tree model for expand, collapse, and traversal.
Styled quick start
Copy this entrypoint first. It includes the imports required to get the component on screen.
svelte
<script lang="ts">
import '@dryui/ui/themes/default.css';
import '@dryui/ui/themes/dark.css';
import { Tree } from '@dryui/ui';
</script>
<Tree.Root>
<Tree.Item>...</Tree.Item>
<Tree.ItemLabel>...</Tree.ItemLabel>
<Tree.ItemChildren>...</Tree.ItemChildren>
</Tree.Root>Import options
Root package
ts
import { Tree } from '@dryui/ui'Per-component subpath
ts
import { Tree } from '@dryui/ui/tree'API
Props, CSS variables, and the public data attributes you can target when styling.
| Prop | Type | Description | Default | Required | Bindable |
|---|---|---|---|---|---|
Tree.Root | |||||
| defaultExpanded | string[] | — | [] | — | — |
| selectedItem | null | — | null | — | ✓ |
| children | Snippet | Content rendered inside the component. | — | ✓ | — |
Tree.Item | |||||
| itemId | string | — | — | ✓ | — |
| children | Snippet | Content rendered inside the component. | — | ✓ | — |
Tree.ItemLabel | |||||
| children | Snippet | Content rendered inside the component. | — | ✓ | — |
Tree.ItemChildren | |||||
| children | Snippet | Content rendered inside the component. | — | ✓ | — |