Tree

Nested, expandable rows for files and hierarchies, with indent guides, connector lines, cascading checkboxes, typeahead and full keyboard support.

bypreet from Hextaui

Installation

terminal

pnpm dlx layro-cli add @preetsuthar17/tree

npx layro-cli add @preetsuthar17/tree

npx layro-cli add @preetsuthar17/tree

bunx layro-cli add @preetsuthar17/tree

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

Code

Dependencies

Demo

"use client"

import * as React from "react"
import { Collapsible as CollapsiblePrimitive } from "@base-ui/react/collapsible"
import { mergeProps } from "@base-ui/react/merge-props"
import { useRender } from "@base-ui/react/use-render"
import { IconChevronRight } from "@tabler/icons-react"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "cn"

import { Checkbox } from "@/components/ui/checkbox"

const treeVariants = cva(
  "relative flex w-full min-w-0 flex-col text-sm text-foreground [--tree-chevron:--spacing(4)] [--tree-indent:calc(var(--tree-chevron)+var(--tree-gap))]",

Free, with GitHub, Google or email. The install command above works without an account.

Versions

1.0.0 · current
Nov 7, 2026
First release.

Similar components