saturation/uisaturation/ui
DocsComponentsBlocksPagesEmails
GitHub

Sections

IntroductionComponentsInstallationMCPThemingDesign

Components

Components

General

AvatarBadgeButtonKbdProgressSeparatorSkeletonSpin ResolveSpinnerSync ButtonTypography

Forms & Inputs

Address LookupCalendar PickerCheckboxComboboxDate PickerEmoji PickerFavicon SearchFieldInputInput GroupInput OTPRadio GroupSelectSliderSwitchTextareaToggleToggle Group

Data Display

AccordionAlertCardChartComparison SliderCredit CardData TableEmptyItemSaturation Credit CardTableTree

Navigation

BreadcrumbCommandMenubarNavigation MenuPaginationTabs

Overlays

CollapsibleContext MenuDialogDropdown MenuSheet

Layout

Button GroupFont ProviderWizard Split Layout

Feedback

Sonner

Animation & Effects

Animated GroupAnimated ListAnimated NumberBeamBlur FadeBorder TrailGlow EffectLiquid MetalLoading StateParallaxPixelProgressive BlurRippleSpotlightText EffectText Shimmer

Productivity

Agent ChatAI Chat InputCoding AgentFiltersFull CalendarKanbanNovel Editor
Docs/Components/Tree

Tree

A tree view component for hierarchical data.

Loading...

Installation

pnpm dlx shadcn@latest add @saturation-ui/tree

Tailwind v4 — Source Scanning

The public shadcn registry installs component source into your project. 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.
PreviousToggleNextTypography

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