Skip to content
Mizen UI
Docs

IntroductionInstallationCLIStylingFoundationsThemingCompositionIntegrationsAccessibilityFor agents

useCopyToClipboard

AccordionAspect RatioCardCollapsibleFrameGridGroupInlineScroll AreaSectionSeparatorSpacerStack

BlockquoteCitationCodeHeadingKbdLabelLinkTextVisually Hidden

ButtonButton GroupToggleToggle groupToolbar

CalendarCheckboxCheckbox groupComboboxDate pickerDate range pickerDate-Time InputFieldFieldsetFile UploadFormInputInput groupNumber fieldOTP FieldRadio groupSelectSliderSwitchTextareaTime Input

BreadcrumbMenubarNavigation MenuPaginationSegmented ControlStepperTabs

Alert dialogCommandContext MenuDialogDrawerMenuPopoverPreview CardSheetTooltip

AlertBadgeEmptyError StateMeterProgressSkeletonSpinnerStatus dotToast

Activity FeedAvatarAvatar GroupData TableListMetricOverflow ListProperty ListTableTokenTree

Area ChartBar ListCalendar HeatmapCategory ComparisonChart FrameChart LegendChart TooltipDistributionFunnelHeatmapMetric TrendPart-to-WholeProgress RingsRadar ChartRadial BarsSankey ChartScatter ChartScore GaugeTime Series

Diagram

AttachmentCarouselCode BlockLightboxMarkdownThumbnailTimestamp

Agent ThinkingApproval CardComposerConversationInline CitationMessageMessage ScrollerQuestion CardSourcesStreaming TextSuggestionTask ListTerminalTool Call

On this page

  • Preview
  • Usage
  • Examples
  • Selected resource
  • Recommendations
  • Usage boundaries
  • API reference

Data

Tree

Browses hierarchical resources with keyboard navigation and optional single-item selection.

idle

Usage

import { Tree } from "@mizen-labs/ui";

Examples

Selected resource

Recommendations

GuidancePractice
Do

Use resource names and stable identifiers. Keep expansion distinct from selection and activation.

Usage boundaries

GuidanceBoundary
Scope

Use Side Navigation for grouped route links. The application owns resource loading and activation outcomes.

API reference

Public props from @mizen-labs/ui. Use exported prop types for the complete TypeScript contract.

PropTypeDefaultDescription
itemsreadonly TreeItemData[]RequiredUnique IDs, text labels, optional disabled state and children.
expandedItemsreadonly string[]-Controlled expanded branches.
defaultExpandedItemsreadonly string[][]Initial uncontrolled expanded branches.
onExpandedItemsChange(ids: string[]) => void-Called after a branch expansion change.
selectedItemIdstring | null-Controls the selected ID; focus and selection remain separate.
defaultSelectedItemIdstring | null-Sets the initial selection; null opts in with no selected item.
onSelectedItemIdChange(id: string | null) => void-Receives user selection changes when selection is enabled.
onItemActivate(item: TreeItemData) => void-Caller-owned resource activation.
PreviousTokenNextArea Chart
  • src
    • app
      • page.tsx
      • layout.tsx
    • components
    • globals.css
  • package.json
  • README.md

Use arrow keys to explore folders. Type a name to find an item.

  • Workspace
    • Design
    • Reports
    • Archive
  • Shared resources

Selected resource

reports

Workspace resources are shared with the Product team.