Tree

Pro

A hierarchy (objects → fields, a flow's elements, a knowledge base's sections) with the keyboard behaviour of a tree: ↑↓ move, → opens or steps in, ← closes or steps out, Home/End jump, Enter selects. One tab stop for the whole tree.

Markdown

Preview

Install

With the Candor CLI

First time? Get started sets up the registry and theme. Or with shadcn directly: npx shadcn@latest add @candor/tree

Brings in: data, locale, utils · npm: lucide-react@^1.67.0

Usage

TSX · The example above

"use client"

import * as React from "react"
import { Columns3, Flag, Table2 } from "lucide-react"
import { Tree } from "@/components/tree"
import type { TreeNode } from "@/lib/data"

const schema: TreeNode[] = [
  {
    id: "tables",
    label: "Tables",
    meta: "24",
    icon: Table2,
    children: [
      {
        id: "projects",
        label: "projects",
        meta: "18 columns",
        icon: Table2,
        children: [
          { id: "projects-region", label: "region", meta: "enum", icon: Columns3 },
          { id: "projects-owner", label: "owner_id", meta: "uuid", icon: Columns3 },
          { id: "projects-archived", label: "archived_at", meta: "timestamp", icon: Columns3 },
        ],
      },
      { id: "deployments", label: "deployments", meta: "12 columns", icon: Table2, children: [{ id: "deployments-sha", label: "commit_sha", meta: "text", icon: Columns3 }] },
      { id: "users", label: "users", meta: "21 columns", icon: Table2 },
    ],
  },
  { id: "flags", label: "Feature flags", meta: "9", icon: Flag, children: [{ id: "flag-billing", label: "new-billing-page", meta: "25% rollout", icon: Flag }] },
]

export default function Example() {
  const [selected, setSelected] = React.useState<string | undefined>()
  return (
    <div className="max-w-xs rounded-xl border bg-card p-1.5">
      <Tree nodes={schema} defaultOpen={["tables", "projects"]} selectedId={selected} onSelect={(n) => setSelected(n.id)} label="acme/api schema" />
    </div>
  )
}

<Tree>

Prop	Type	Default	Description
nodesrequired	`TreeNode[]`	—	The top-level nodes, each with its children.
selectedId	`string \| undefined`	—	The selected node's id, highlighted and focused first.
onSelect	`((node: TreeNode) => void) \| undefined`	—	Called with the node a person clicks or presses Enter on.
defaultOpen	`string[] \| undefined`	[]	Ids of nodes open on first render.
label	`string \| undefined`	—	The tree's accessible name.
className	`string \| undefined`	—	Extra classes for the outer element.

Strings

The fixed words, in English by default. Change any of them under tree in <LocaleProvider strings={{ … }}>; the table is exported as treeStrings.

Key	English
tree	Tree