Tree View
NewInstallation
npx shadcn@latest add https://uibrik.com/r/tree-view.jsonInstall the packages
npm install @tabler/icons-react motionAdd the cn helper
Imports
cnfrom@/lib/utils, whichshadcn initcreates. Add it by hand without shadcn.Copy the source into your project
components/uibrik/tree-view/tree-view.tsx"use client"; // A file and folder tree. Folders ease open to their height, guide lines show // what sits inside what, and the selected row's highlight slides to the next // one instead of blinking. Full tree keyboard support: Up/Down move, Right // opens or steps in, Left closes or steps out, Home/End jump, Enter selects, // and typing a letter jumps to the next name starting with it. import { AnimatePresence, motion, useReducedMotion } from "motion/react"; import { IconBraces, IconFile, IconFileCode, IconFileText, IconFolder, IconFolderOpen, IconPhoto, } from "@tabler/icons-react"; import { useId, useMemo, useRef, useState, type KeyboardEvent, type ReactNode } from "react"; import { cn } from "@/lib/utils"; export type TreeNode = { name: string; /** Present (even empty) makes it a folder. */
Adds the files to
components/uibrik/tree-view and installs @tabler/icons-react and motion. With the @uibrik namespace set up: npx shadcn@latest add @uibrik/tree-view.Props
TreeView- guides
- Type boolean
- true
- Vertical lines linking children to their folder.
- indent
- Type number
- 16
- Indent per level.
- datarequired
- Type { name; children?; icon? }[]
- –
- The tree. A node with children (even empty) is a folder; icons come from the file extension unless given.
- defaultExpanded
- Type string[] | "all"
- –
- Folder paths open at first, like "src/app".
- defaultSelected
- Type string
- –
- Path selected at first.
- onSelect
- Type (path, node) => void
- –
- Called when a row is selected.
- label
- Type string
- "Files"
- Accessible name for the tree.
- className
- Type string
- –
- Classes for the tree.
