Navigation & disclosureExplore · Adapt · Compose
Tree
Accessible hierarchical tree view with composable items, controlled expansion/selection, keyboard navigation, and height-based expand animation. Organize content into understandable destinations and reveal detail when it becomes relevant. Keep the active location or expanded state easy to recognize. Explore the live examples, inspect their source and choose the composition that fits your interface before connecting it to your application's data.
The examples use @/components/kamod-ui/tree in a Preact project. Follow the live result and its source together: compare supported options in the API reference, refine presentation with the component styles guide, and use shared theme tokens for consistent colors and surfaces. Preserve keyboard behavior and meaningful labels as you replace the sample content.
In this guide 7 sections
Installation
Import TreeProvider, Tree, and TreeItem from @kamod-ch/ui/tree.
pnpm add @kamod-ch/uiThe @/components/kamod-ui/… imports in these examples refer to local source files. Configure that alias when copying source, or use the corresponding exports from @kamod-ch/ui when installing the package. Connect the global theme CSS and Tailwind source detection before your first render.
import { Tree, TreeItem, TreeProvider } from "@/components/kamod-ui/tree";Usage
Wrap Tree in TreeProvider. Nest TreeItem children for branches. Provide aria-label or aria-labelledby on Tree.
import { Tree } from "@/components/kamod-ui/tree";Choose a complete composition from the examples below; required child components and props vary by pattern.
<TreeProvider defaultExpandedIds={["documents"]}>
<Tree aria-label="Files">
<TreeItem nodeId="documents" label="Documents">
<TreeItem nodeId="readme" label="README.md" />
</TreeItem>
</Tree>
</TreeProvider>Component examples & variants
Explore Tree in different contexts, from the starting pattern to the compositions below. Begin with Basic File Tree, then compare the examples that match your content, state and layout. These are working patterns to adapt, not a list of interchangeable variant values: check the API reference before using a prop or combining behaviors. Look at the surrounding labels, supporting text and spacing as well as the component itself.
Read the result and its implementation together. Use each showcase’s Code view to inspect imports and composition, or its Prompt view to prepare a setup or adaptation brief. Try the narrow preview and local theme controls before connecting real data, and use Reset to return an example to its initial state. Keep layout changes in class utilities where appropriate; follow the component styles guide for hierarchy and the theming guide for shared surfaces and colors. The accessibility notes explain what to preserve when making those changes.
Basic File Tree
A simple nested file hierarchy with default expansion on Documents.
Default Expanded
Use defaultExpandedIds to open multiple branches initially.
Controlled Expansion
Drive expandedIds from React/Preact state with onExpandedChange.
Single Selection
Set selectionMode="single" and optionally defaultSelectedIds.
Multiple Selection
Use selectionMode="multiple". Ctrl/Cmd+click toggles membership; Ctrl/Cmd+Space toggles via keyboard.
Without Icons and Lines
Disable connector lines and icon slots for minimal trees.
Variants and Sizes
TreeProvider variant and size props style all items consistently.
Disabled Items
Disabled items are skipped in keyboard order and cannot be selected.
Deep Structure and Long Labels
Levels and aria-level are derived automatically; labels truncate with text-start.
Advanced Compound API
Compose TreeNode, TreeNodeTrigger, TreeExpander, TreeIcon, TreeLabel, and TreeNodeContent for full layout control. Mix with TreeItem in the same tree.
Custom Icons
Use @kamod-ch/icons exports or custom Preact SVG components. TreeIcon accepts a render function with TreeIconState.
State-Specific Icons
Icon priority: disabledIcon → selectedIcon → expandedIcon → node icon/render → provider default. Override per node as needed.
Provider Default Icons
Set branch, branchExpanded, and leaf defaults on TreeProvider. Individual nodes can override with their own icon prop.
TreeNodeActions
Place badges or icon buttons in TreeNodeActions. Pointer and keyboard events are isolated from node selection and expansion.
Custom Preact SVG Icon
Any Preact component works as an icon without coupling the core package to a specific icon library.
Keyboard
Arrow keys move focus among visible items. Home/End jump to first/last. Enter/Space activate (expand closed branches and select when enabled). Ctrl/Cmd+A selects all visible items in multiple mode.
Accessibility
Build the complete interaction, including the parts outside Tree. The notes below distinguish the current implementation from the labels, content and behavior your application supplies. Start with the live preview, check the props and data reference, and test the finished composition with real content rather than assuming that an unchanged visual example covers every use case.
Built-in behavior and defaults
Tree uses tree/treeitem/group roles, hierarchical levels, expanded state and optional selection state. It requires an accessible name and warns during development when one is missing. Selection mode and expansion are separate concerns.
Labels and relationships
Name the tree's purpose, such as Project files, and give nodes useful labels independent of their folder/file icon. Distinguish duplicate filenames through nearby hierarchy or descriptions. Keep each node's identity stable as data changes.
Keyboard and focus
Use the component's tree keyboard handling for hierarchical movement rather than making every nested node a tab stop. Verify expansion, activation and selection with the exact selection mode you enable, including disabled nodes and filtered results.
States and integration details
A tree is appropriate for an interactive hierarchy, not every nested navigation list. If deleting or filtering the focused node, choose a surviving focus target. Do not silently reset selection whenever an unrelated branch loads.
Verify the complete interaction
Check behavior as well as markup. Work through these scenarios in the application where the component will be used. Automated checks can help find structural problems; also review the reading experience with a screen reader, keyboard focus and the actual feedback from your application.
- Traverse parent, child and sibling nodes using the documented keyboard controls.
- Read level, expanded and selected states and compare them with the visible hierarchy.
- Remove or filter the focused node and verify a meaningful node retains focus.
Recheck the result after changing theme tokens, translations or class overrides. Include text enlargement, narrow layouts and reduced-motion settings where animation is present. Inspect the component source when a behavior differs from your expectation; a role or state attribute does not implement keyboard interaction by itself.
For background, read the WAI-ARIA authoring guidance and keyboard interface guidance. These explain the patterns; verify browser and assistive-technology behavior for the implementation and audience you actually support.
Props and data
Configure Tree using the contracts below. Read the documented options alongside the source definitions to understand which values your application supplies and which details the component owns. Start with a prop or helper, then follow its type link to inspect the declaration without leaving the page.
Props overview.
TypeScript source at build time. Props inherited through HTMLAttributes, Omit or variant helpers remain references in those declarations; their fields are not flattened here. Match the reference to your installed version, and check a package’s exports before writing an import type. A type exported by a source file is not necessarily re-exported by @kamod-ch/ui.TypeScriptComponent props
? means a field can be omitted; it does not promise a fallback value. Existing documented defaults remain alongside the descriptions. For callbacks, check the argument and return types before connecting your own state or services.TreeProvider
Owns expansion, selection, focus registry, and visual defaults. Supports controlled and uncontrolled state.
| Prop / type | Description |
|---|---|
expandedIds | Documented expandedIds option for TreeProvider. Check its type alongside the usage examples before supplying a value. Documented default |
defaultExpandedIds | Documented defaultExpandedIds option for TreeProvider. Check its type alongside the usage examples before supplying a value. Documented default |
onExpandedChange | Documented onExpandedChange option for TreeProvider. Check its type alongside the usage examples before supplying a value. Documented default |
selectedIds | Documented selectedIds option for TreeProvider. Check its type alongside the usage examples before supplying a value. Documented default |
defaultSelectedIds | Documented defaultSelectedIds option for TreeProvider. Check its type alongside the usage examples before supplying a value. Documented default |
onSelectionChange | Documented onSelectionChange option for TreeProvider. Check its type alongside the usage examples before supplying a value. Documented default |
selectionMode | Documented selectionMode option for TreeProvider. Check its type alongside the usage examples before supplying a value. Documented default |
showLines | Documented showLines option for TreeProvider. Check its type alongside the usage examples before supplying a value. Documented default |
showIcons | Documented showIcons option for TreeProvider. Check its type alongside the usage examples before supplying a value. Documented default |
animateExpand | Documented animateExpand option for TreeProvider. Check its type alongside the usage examples before supplying a value. Documented default |
indent | Documented indent option for TreeProvider. Check its type alongside the usage examples before supplying a value. Documented default |
icons | branch, branchExpanded, leaf, expander, expanderExpanded Documented default |
variant | Documented variant option for TreeProvider. Check its type alongside the usage examples before supplying a value. Documented default |
size | Documented size option for TreeProvider. Check its type alongside the usage examples before supplying a value. Documented default |
Tree
| Prop / type | Description |
|---|---|
aria-label / aria-labelledby | Documented aria-label / aria-labelledby option for Tree. Check its type alongside the usage examples before supplying a value. Documented default |
class | Documented class option for Tree. Check its type alongside the usage examples before supplying a value. Documented default |
TreeItem
| Prop / type | Description |
|---|---|
nodeId | Documented nodeId option for TreeItem. Check its type alongside the usage examples before supplying a value. Documented default |
label | Documented label option for TreeItem. Check its type alongside the usage examples before supplying a value. Documented default |
icon | Documented icon option for TreeItem. Check its type alongside the usage examples before supplying a value. Documented default |
expandedIcon | Documented expandedIcon option for TreeItem. Check its type alongside the usage examples before supplying a value. Documented default |
selectedIcon | Documented selectedIcon option for TreeItem. Check its type alongside the usage examples before supplying a value. Documented default |
disabledIcon | Documented disabledIcon option for TreeItem. Check its type alongside the usage examples before supplying a value. Documented default |
endContent | Documented endContent option for TreeItem. Check its type alongside the usage examples before supplying a value. Documented default |
data | Documented data option for TreeItem. Check its type alongside the usage examples before supplying a value. Documented default |
disabled | Documented disabled option for TreeItem. Check its type alongside the usage examples before supplying a value. Documented default |
class | Documented class option for TreeItem. Check its type alongside the usage examples before supplying a value. Documented default |
Compound primitives
TreeNode, TreeNodeTrigger, TreeExpander, TreeIcon, TreeLabel, TreeNodeActions, TreeNodeContent, and TreeLines share the same state and accessibility as TreeItem.
| Prop / type | Description |
|---|---|
TreeNode.nodeId | Documented TreeNode.nodeId option for Compound primitives. Check its type alongside the usage examples before supplying a value. Documented default |
TreeIcon.icon | Documented TreeIcon.icon option for Compound primitives. Check its type alongside the usage examples before supplying a value. Documented default |
TreeNodeActions | Documented TreeNodeActions option for Compound primitives. Check its type alongside the usage examples before supplying a value. Documented default |
Data type reference
Expand a card to inspect and copy the exact declaration. The code header identifies its repository file; follow imported or inherited types in the implementation source when you need the complete dependency chain. Required-field summaries cover fields declared directly in that type. Source-only helpers and inferred schema outputs describe the local implementation, not additional props you can pass to every component.
TreePropsTreeItemPropsnodeId, labelTreeLinesPropslevel, parentPath, isLast, indentTreeNodeContextValuenodeId, disabled, hasChildren, level, parentPath, isLast, itemRefTreeNodePropsnodeIdTreeNodeTriggerPropsTreeExpanderPropsTreeIconPropsTreeLabelPropsTreeNodeActionsPropsTreeNodeContentPropsTreeSelectionModeTreeProviderContextValueregistry, expandedIds, selectedIds, selectionMode, showLines, showIcons, animateExpand, indent, variant, size, focusedId, tabbableId, isExpandedControlled, isSelectedControlled, setExpandedIds, setSelectedIds, toggleExpanded, selectNode, focusNode, getNodeDataTreeItemContextValuenodeId, level, parentPath, isLastTreeProviderPropsResolveTreeIconOptionsstateTreeNodeRecordnodeId, parentId, disabled, hasChildren, data, element, order, isLast, levelTreeIconStatenodeId, branch, expanded, selected, disabled, levelTreeIconRenderTreeIconPropTreeIconsBuild it into your interface
Use the Tree examples as a starting point, then review the behavior in the context of your own screen. Layout, state and content should work together.
Connect the behavior
Use stable identifiers when items come from data, especially when they can be reordered. Keep links as real destinations and use disclosure controls for revealing content. Decide whether selection belongs to local state, the URL or a parent component before connecting callbacks.
Copy the composition, then connect its intent. Replace sample records and callbacks with your own data flow. For options such as value, defaultValue, open or onChange, use only those documented in this component's API; different components expose different contracts.
Give each piece of state one owner. Keep a temporary selection inside the interface when nothing else needs it; lift shared values into a parent when other controls depend on them. Read the prop reference before combining controlled values with defaults. A default normally initializes a control; it is not a substitute for updating its current value.
Connect requests in an event handler or your application’s data layer, never as a side effect of rendering. Keep pending, completed and failed outcomes distinct, preserve useful input after an error, and offer a clear recovery action. If the integration subscribes to an external source, remove that subscription when its owner unmounts; cancel or ignore obsolete requests so an earlier response cannot replace newer results.
Start with the live preview, then exercise the same interaction with your actual data. The type definitions describe accepted values; they do not implement persistence, navigation or server-side validation for you. Keep those responsibilities in the application that composes the UI.
Refine the presentation
Let a parent own the surrounding spacing. Keep related elements together with gap and use semantic surface/foreground pairs so the composition follows the active theme. The wrapper below changes the surrounding layout without assuming extra props on Tree.
import type { ComponentChildren } from "preact";
export function ExampleSurface({ children }: { children: ComponentChildren }) {
return (
<div class="grid min-w-0 gap-4 rounded-lg border border-border bg-card p-4 text-card-foreground sm:p-6">
{children}
</div>
);
}Put the chosen example inside ExampleSurface, then refine supported variants and sizes using the API above. For application-wide changes, adjust theme tokens instead of repeating fixed colors. See Component styles for hierarchy, density and focus treatments.
Review the complete interaction
- Try long labels, nested content and an empty list without changing the focus order.
- Verify the documented arrow-key and activation behavior where the pattern supports it.
- Check the selected or expanded item after data changes and while navigating back to the page.
The preview's narrow control changes its container width. Also resize the browser when checking viewport-based Tailwind utilities such as sm: and md:, and test overlays in the full page where their portals render.
Compose a complete interface
Tree is one part of the interaction. Choose companion components for the information or actions that still need a place on the screen. The references below are suggestions to compose deliberately, not extra dependencies you must add to every example.
Keep one source of truth for the operation and let each component communicate a different part of it. For example, waiting, no results and failure need different explanations. Avoid showing contradictory states together, and keep recovery actions close to the message that explains them.
Start with the smallest composition that explains the task. Browse the component library for individual controls or the block collections for complete layouts. Reuse shared theme tokens so these pieces feel consistent in light and dark mode.
Sources & design references
Follow Tree from its implementation to the ideas behind your own composition. Start with the local API, explore a visual direction, then bring the result back to your app’s shared styles.
Bring it back to your app
A reference becomes useful when it fits your real content. Work through these decisions in order:
- Keep the behavior grounded. Start with the interactive examples, then connect your data and callbacks using the integration guidance. Preserve labels, keyboard access and disabled states as you change the presentation.
- Make the styling repeatable. Use the styles guide for local
classadjustments and theming documentation for shared color decisions. Keep semantic surface and foreground pairs together in both light and dark mode. - Check the complete screen. See how components combine in the block collections, then try long labels, loading states and narrow layouts in your own composition. The Theme Toggle guide helps you expose a scheme switch in the finished interface.