TreeView

Renders a hierarchical tree of expandable and selectable items.

Examples

Basic

• Overview
• Analytics
• Settings

<TreeView density="balanced" items={basicItems} />

Nested

• src
• docs

<TreeView density="balanced" items={nestedItems} />

Initially Expanded

• workspace
  • app
    • page.tsx
    • layout.tsx
  • config.ts

<TreeView density="balanced" items={initiallyExpandedItems} />

With Descriptions

• APIPublic component contracts and generated types.
• FixturesShared example data used by tests and stories.
• MigrationsSchema changes that need review before deploy.

<TreeView
  density="balanced"
  items={[ { id: 'api', label: 'API', description: 'Public component contracts and generated types.', }, { id: 'fixtures', label: 'Fixtures', description: 'Shared example data used by tests and stories.', }, { id: 'migrations', label: 'Migrations', description: 'Schema changes that need review before deploy.', }, ]}
/>

With Start And End Content

• components24
• databaseReview
• deployReady

<TreeView
  density="balanced"
  items={[ { id: 'components', label: 'components', startContent: <Icon color="secondary" icon={Folder} size="sm" />, endContent: <Badge color="info" label="24" size="sm" />, }, { id: 'database', label: 'database', startContent: <Icon color="secondary" icon={Database} size="sm" />, endContent: <Badge color="warning" label="Review" size="sm" />, }, { id: 'deploy', label: 'deploy', startContent: <Icon color="success" icon={BadgeCheck} size="sm" />, endContent: <Badge color="success" label="Ready" size="sm" />, }, ]}
/>

Action Items

• Open project
• Rename folder
• Archive workspace

<TreeView
  density="balanced"
  items={[ {id: 'open', label: 'Open project', onClick: fn()}, {id: 'rename', label: 'Rename folder', onClick: fn()}, {id: 'archive', label: 'Archive workspace', onClick: fn()}, ]}
/>

Link Items

• Documentation
• External status page
• Billing settings

<TreeView
  density="balanced"
  items={[ {href: '/docs', id: 'docs', label: 'Documentation'}, { href: 'https://example.com', id: 'external', label: 'External status page', target: '_blank', }, {href: '/settings/billing', id: 'billing', label: 'Billing settings'}, ]}
/>

Disabled Items

• Available
• Locked
• Disabled parent

<TreeView
  density="balanced"
  items={[ {id: 'available', label: 'Available'}, {id: 'locked', isDisabled: true, label: 'Locked'}, { id: 'disabled-parent', isDisabled: true, label: 'Disabled parent', children: [{id: 'disabled-child', label: 'Child'}], }, ]}
/>

Selected Items

• Inbox
• Assigned to me
• Completed

<TreeView
  density="balanced"
  items={[ {id: 'inbox', label: 'Inbox'}, {id: 'assigned', isSelected: true, label: 'Assigned to me'}, {id: 'completed', label: 'Completed'}, ]}
/>

Density

Balanced

• Overview
• Analytics
• Settings

Compact

• Overview
• Analytics
• Settings

Spacious

• Overview
• Analytics
• Settings

<HStack align="start" gap={6}>
  <VStack align="stretch" gap={2}>
    <Text weight="semibold">Balanced</Text>
    <TreeView density="balanced" items={basicItems} />
  </VStack>
  <VStack align="stretch" gap={2}>
    <Text weight="semibold">Compact</Text>
    <TreeView density="compact" items={basicItems} />
  </VStack>
  <VStack align="stretch" gap={2}>
    <Text weight="semibold">Spacious</Text>
    <TreeView density="spacious" items={basicItems} />
  </VStack>
</HStack>

With Header

Project files

• src
• docs

<TreeView
  density="balanced"
  items={nestedItems}
  header={<Text weight="semibold">Project files</Text>}
/>

Deeply Nested

• Level 1
  • Level 2
    • Level 3
      • Level 4
        • Level 5

<TreeView density="balanced" items={deeplyNestedItems} />

Mixed Interactive

• package.json
• assets
• security
• service status
• preferences

<TreeView
  density="balanced"
  items={[ { id: 'package', label: 'package.json', startContent: <Icon color="secondary" icon={Code} size="sm" />, onClick: fn(), children: [ {id: 'package-scripts', label: 'scripts', onClick: fn()}, {id: 'package-deps', label: 'dependencies', onClick: fn()}, ], }, { id: 'assets', label: 'assets', startContent: <Icon color="secondary" icon={Box} size="sm" />, onClick: fn(), children: [ { id: 'assets-icons', label: 'icons', startContent: <Icon color="secondary" icon={File} size="sm" />, }, { id: 'assets-copy', label: 'copy.json', startContent: <Icon color="secondary" icon={FileText} size="sm" />, }, ], }, { href: '/settings/security', id: 'security', label: 'security', startContent: <Icon color="secondary" icon={Lock} size="sm" />, }, { href: 'https://example.com/status', id: 'status', label: 'service status', startContent: <Icon color="secondary" icon={Globe} size="sm" />, target: '_blank', }, { id: 'preferences', label: 'preferences', startContent: <Icon color="secondary" icon={Settings} size="sm" />, onClick: fn(), }, ]}
/>

API

TreeView

Renders a hierarchical tree of expandable and selectable items.

Prop	Type	Default	Description
className	string	—	Additional CSS class names applied to the root.
data-testid	string	—	Test ID applied to the root.
density	"compact" | "balanced" | "spacious"	'balanced'	Spacing density for tree items.
header	ReactNode	—	Header content rendered above the tree and associated with aria-labelledby.
items*	TreeViewItemData[]	—	Recursive tree item data. Pass a stable reference, or memoize large inline arrays, to avoid repeating recursive expansion scans on every render.
ref	Ref<HTMLDivElement>	—	Ref forwarded to the root element.
style	CSSProperties	—	Inline styles applied to the root.