# Tree A hierarchy of items that open and close, such as files and folders. Source: [tree.tsx](https://github.com/jakejarvis/jarvis-ui/blob/main/src/components/ui/tree.tsx) ```tsx import { FileCodeIcon, FileImageIcon, FileJsonIcon, FileTextIcon, FolderIcon } from "lucide-react"; import { Tree, TreeItem } from "@/components/ui/tree"; export default function TreeFileTree() { return ( }> }> } /> } /> } /> }> } /> } /> } /> }> } /> } /> } /> ); } ``` ## Installation Add the registry, once per project: ```bash npx shadcn@latest registry add @jarvis=https://ui.jarv.is/r/{name}.json ``` Then add the component: ```bash npx shadcn@latest add @jarvis/tree ``` ## Usage ```tsx import { FileIcon, FolderIcon } from "lucide-react"; import { Tree, TreeItem } from "@/components/ui/tree"; export function Files() { return ( }> } /> } /> ); } ``` Give `Tree` an `aria-label`, and each `TreeItem` a `value` that's unique within the tree. An item with `TreeItem`s inside it is a folder that opens and closes, and `children={[]}` makes an empty folder. Clicking an item selects it, and clicking a folder also opens or closes it. Clicking only the caret opens or closes it without selecting it. The tree is a single stop in the tab order, which lands on the selected item, or on the folder that holds it while that folder is closed. Inside it, the up and down arrows move between items, right opens a folder or moves into it, and left closes it or moves to its parent. Home and End jump to the first and last items, typing jumps to the next item whose label starts with what's typed, and `*` opens every folder beside the current one. Enter or Space selects an item, and Enter also opens or closes a folder. ## Composition - `Tree` - `TreeItem` - `TreeItem` ## Examples ### From data Render a nested array recursively, using each item's path as its `value`. Items can come from your own components, as long as each renders a `TreeItem`. A closed folder keeps its items in the page, hidden, so the tree always knows where the selected item is. ```tsx import { FileIcon, FolderIcon } from "lucide-react"; import { Tree, TreeItem } from "@/components/ui/tree"; type Entry = { name: string; children?: Entry[] }; const files: Entry[] = [ { name: "docs", children: [ { name: "getting-started.md" }, { name: "guides", children: [{ name: "deploying.md" }, { name: "theming.md" }] }, ], }, { name: "scripts", children: [{ name: "build.mjs" }, { name: "release.mjs" }] }, { name: "LICENSE" }, ]; function FileNode({ entry, path }: { entry: Entry; path: string }) { return ( : }> {entry.children?.map((child) => ( ))} ); } export default function TreeFromData() { return ( {files.map((entry) => ( ))} ); } ``` ### Controlled Pass `expanded` and `onExpandedChange` to control which folders are open, and `value` and `onValueChange` to control which item is selected. ```tsx import * as React from "react"; import { Button } from "@/components/ui/button"; import { Tree, TreeItem } from "@/components/ui/tree"; const folders = ["design", "design/components", "engineering"]; export default function TreeControlled() { const [expanded, setExpanded] = React.useState(["design"]); const [value, setValue] = React.useState("design/components/buttons"); return (

Selected: {value}

); } ``` ### Without guides Lines run down each open folder's items, and the line beside the selected item darkens. Set `guides={false}` to leave just the indentation. ```tsx import { Tree, TreeItem } from "@/components/ui/tree"; export default function TreeWithoutGuides() { return ( ); } ``` ### With counts `end` places text at the end of an item, such as a count. Keep it to text and badges, since the row is a single control and nothing inside it can take focus. ```tsx import { ArchiveIcon, FilePenIcon, InboxIcon, SendIcon, StarIcon, TagIcon } from "lucide-react"; import { Tree, TreeItem } from "@/components/ui/tree"; export default function TreeWithCounts() { return ( } end="12"> } end="3" /> } /> } /> } end="1" /> } /> } /> ); } ``` ### Long labels A text label that doesn't fit ends in an ellipsis, and hovering it shows the whole label in a tooltip. For file names, pass a [Truncate](https://ui.jarv.is/components/truncate.md) with `position="middle"` as the `label` instead, so they're cut in the middle and their extensions stay in sight. ```tsx import { FileIcon, FolderIcon } from "lucide-react"; import { Tree, TreeItem } from "@/components/ui/tree"; import { Truncate } from "@/components/ui/truncate"; export default function TreeLongLabels() { return ( } > q3-board-update-final-v4-with-appendix.pdf} icon={} /> customer-interview-transcripts-batch-2.docx} icon={} /> homepage-hero-illustration-dark@2x.png} icon={} /> } /> ); } ``` ### Disabled A disabled item can still be reached with the arrow keys, but it can't be selected, and a disabled folder can't be opened. ```tsx import { FileTextIcon, FolderIcon, LockIcon } from "lucide-react"; import { Tree, TreeItem } from "@/components/ui/tree"; export default function TreeDisabled() { return ( }> } /> } disabled /> } disabled> } /> ); } ``` ## Props | Part | Extends | | --- | --- | | `Tree` | `