saturation/uisaturation/ui
DocsComponentsBlocksPages
GitHub

Sections

IntroductionComponentsInstallationMCPTheming

Components

ComponentsAccordionAI Chat InputAlertAnimated GroupAnimated NumberAvatarBadgeBeamBlur FadeBorder TrailBreadcrumbButtonButton GroupCalendar PickerCardChartCheckboxCollapsibleComboboxCommandComparison SliderContext MenuCredit CardData TableDate PickerDialogDropdown MenuEmoji PickerEmptyFieldFiltersFull CalendarGlow EffectInputInput GroupInput OTPItemKanbanKbdMenubarNavigation MenuNovel EditorPaginationParallaxProgressProgressive BlurRadio GroupRippleSelectSeparatorSheetSkeletonSliderSonnerSpinnerSpotlightSwitchTableTabsText EffectText ShimmerTextareaToggleToggle GroupTreeTypography
Docs/Components/Tree

Tree

A tree view component for hierarchical data.

Loading...

Installation

pnpm dlx shadcn@latest add https://ui.saturation.io/r/tree.json

Tailwind v4 — Source Scanning

Saturation UI copies component source into your project via the shadcn registry (no npm package). If Tailwind v4 isn't scanning your components directory, add this to your CSS entry file:

@source "../components";

This ensures all utility classes in CVA variants and data attribute selectors are included in your build.

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.
PreviousTooltipNextTypography

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