saturation/ui
DocsComponentsBlocksPages

Sections

IntroductionComponentsInstallationTheming

Components

ComponentsAccordionAI Chat InputAlertAnimated GroupAnimated NumberAvatarBadgeBorder TrailBreadcrumbButtonButton GroupCalendar PickerCardChartCheckboxCollapsibleComboboxCommandContext MenuCredit CardData TableDate PickerDialogDropdown MenuEmptyFieldFiltersFull CalendarGlow EffectInputInput GroupInput OTPItemKanbanKbdMenubarNovel EditorPaginationProgressProgressive BlurRadio GroupSelectSeparatorSheetSkeletonSliderSonnerSpinnerSpotlightSwitchTableTabsText EffectText ShimmerTextareaToggleToggle GroupTreeTypography
Docs/Components/Tree

Tree

A tree view component for hierarchical data.

Loading...

Installation

pnpm dlx shadcn@latest add @saturation/tree

Usage

import { Tree, TreeItem } from "@/components/ui/tree"
<Tree>
  <TreeItem label="Parent">
    <TreeItem label="Child 1" />
    <TreeItem label="Child 2" />
  </TreeItem>
</Tree>

Examples

File System

Loading...
Deep nested file system.

Collapsed

Loading...
All nodes start collapsed.

Column Visibility

Loading...
Tree with action icons.

API Reference

PropTypeDefaultDescription
dataTreeNode[]—Tree data structure.

On This Page

  • Installation
  • Usage
  • Examples
  • File System
  • Collapsed
  • Column Visibility
  • API Reference
src
components
button.tsx
card.tsx
dialog.tsx
lib
app.tsx
my-project
src
components
ui
button.tsx
card.tsx
dialog.tsx
input.tsx
header.tsx
sidebar.tsx
lib
app
layout.tsx
page.tsx
globals.css
public
favicon.ico
robots.txt
package.json
tsconfig.json
src
public
package.json
Design
Header
Hero Section
Footer
Assets
Logo
Background
Typography