Tree

A tree component that displays hierarchical data with expandable and collapsible nodes. It includes animations and allows for custom node rendering. Use it to represent nested data structures like file systems or organization charts.

byShadcnblocks.com from Kibo UI

Installation

terminal

pnpm dlx layro-cli add @shadcnblocks/tree

npx layro-cli add @shadcnblocks/tree

npx layro-cli add @shadcnblocks/tree

bunx layro-cli add @shadcnblocks/tree

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client";

import { ChevronRight, File, Folder, FolderOpen } from "lucide-react";
import { AnimatePresence, motion } from "motion/react";
import {
  type ComponentProps,
  createContext,
  type HTMLAttributes,
  type ReactNode,
  useCallback,
  useContext,
  useId,
  useState,
} from "react";