Tree

Variants

Every vocabulary variant on the default tone. Omit variant to follow the ambient design style.

import { Tree } from "@glinui/ui"
export function TreeVariantsDemo() {
  return (

import { Tree } from "@glinui/ui"


export function TreeVariantsDemo() {
  return (
    <div className="grid gap-4 md:grid-cols-2">
      <Tree variant="glinr" nodes={[{ label: "src", children: [{ label: "index.ts" }] }, { label: "package.json" }]} />
      <Tree variant="solid" nodes={[{ label: "src", children: [{ label: "index.ts" }] }, { label: "package.json" }]} />
      <Tree variant="plain" nodes={[{ label: "src", children: [{ label: "index.ts" }] }, { label: "package.json" }]} />
      <Tree variant="soft" nodes={[{ label: "src", children: [{ label: "index.ts" }] }, { label: "package.json" }]} />
      <Tree variant="outline" nodes={[{ label: "src", children: [{ label: "index.ts" }] }, { label: "package.json" }]} />
      <Tree variant="ghost" nodes={[{ label: "src", children: [{ label: "index.ts" }] }, { label: "package.json" }]} />
      <Tree variant="gradient" nodes={[{ label: "src", children: [{ label: "index.ts" }] }, { label: "package.json" }]} />
    </div>
  )
}

All Variants

Four surface variants match the design system, `default`, `glass`, `outline`, and `ghost`.

import { Tree } from "@glinui/ui"

const nodes = [
  { label: "src", children: [{ label: "index.ts" }, { label: "App.tsx" }] },
  { label: "package.json" }
]

export function TreeVariantsDemo() {
  return (
    <div className="grid grid-cols-2 gap-4">
      <div>
        <p className="mb-2 text-xs font-semibold text-neutral-500 uppercase tracking-widest">Default</p>
        <Tree nodes={nodes} variant="default" />
      </div>
      <div>
        <p className="mb-2 text-xs font-semibold text-neutral-500 uppercase tracking-widest">Glass</p>
        <Tree nodes={nodes} variant="glass" />
      </div>
      <div>
        <p className="mb-2 text-xs font-semibold text-neutral-500 uppercase tracking-widest">Outline</p>
        <Tree nodes={nodes} variant="outline" />
      </div>
      <div>
        <p className="mb-2 text-xs font-semibold text-neutral-500 uppercase tracking-widest">Ghost</p>
        <Tree nodes={nodes} variant="ghost" />
      </div>
    </div>
  )
}

buildFileTree Utility

`buildFileTree` converts a flat array of slash-separated file paths into a nested `TreeNode[]` structure. Pass an optional `hrefPrefix` to make leaf nodes into links, or `getBadge` to attach badges based on file path patterns.

import { Tree, buildFileTree } from "@glinui/ui"

const paths = [
  "src/components/button.tsx",
  "src/components/input.tsx",
  "src/lib/cn.ts",
  "src/lib/utils.ts",
  "src/index.ts",
  "package.json"
]

export function TreeBuildFileTreeDemo() {
  const nodes = buildFileTree(paths)
  return <Tree nodes={nodes} className="max-w-xs" />
}

// With href links and badges:
export function TreeBuildFileTreeLinkedDemo() {
  const nodes = buildFileTree(paths, {
    hrefPrefix: "https://github.com/org/repo/blob/main",
    getBadge: (path) => {
      if (path.endsWith(".tsx")) return { badge: "tsx", badgeVariant: "info" }
      if (path.endsWith(".ts"))  return { badge: "ts",  badgeVariant: "default" }
      return null
    }
  })
  return <Tree nodes={nodes} className="max-w-xs" />
}

Collapsed by Default

Set `defaultExpanded={false}` to render all folders in their collapsed state initially.

import { Tree } from "@glinui/ui"

const nodes = [
  {
    label: "src",
    children: [
      { label: "components", children: [{ label: "button.tsx" }, { label: "input.tsx" }] },
      { label: "index.ts" }
    ]
  },
  { label: "package.json" }
]

export function TreeCollapsedDemo() {
  return <Tree nodes={nodes} defaultExpanded={false} className="max-w-xs" />
}

Keyboard Interactions

Affected properties