Hex UIv1

Dendrogram

Clustering tree where every leaf sits at the same depth, regardless of branch length — the visual signature of taxonomies, phylogenetic trees, and hierarchical-clustering output.

Installation

pnpm
pnpm dlx @hex-core/cli add dendrogram

Usage

tsx
import { Dendrogram } from "@/components/ui/dendrogram"

Taxonomy dendrogram

Equal-depth leaves arranged horizontally with step links.

tsx
<Dendrogram root={{
  id: "root", label: "Animals",
  children: [
    { id: "mammals", label: "Mammals", children: [
      { id: "cat", label: "Cat" },
      { id: "dog", label: "Dog" },
    ]},
    { id: "birds", label: "Birds", children: [{ id: "robin", label: "Robin" }] },
  ],
}} />

API Reference

PropTypeDefaultDescription
rootrequired
object—Hierarchy root: { id, label, children? }.
orientation
"horizontal" | "vertical"horizontal"horizontal" runs root-to-leaves left→right; "vertical" runs top→bottom.
linkShape
"step" | "diagonal"step"step" draws right-angle elbow links (taxonomy aesthetic); "diagonal" uses smooth Bezier curves.
width
number600SVG pixel width.
height
number400SVG pixel height.
onLeafClick
function—Called with the clicked DendrogramNode when a user clicks any leaf.
className
string—Additional CSS classes on the SVG element.

AI Guidance

When to use

Visualize taxonomic / phylogenetic / clustering hierarchies where the user expects every leaf to sit at the same depth. Ideal when the tree shape itself is the message (groupings, sibling relationships). `onLeafClick` fires for LEAVES ONLY — internal-node clicks are no-ops (use OrgChart if you need callbacks on every node).

When not to use

Don't use for value-scaled hierarchies (use TreeMap or Sunburst). Don't use for tree shapes where depth has meaning (use OrgChart, which uses d3.tree). Don't use for arbitrary node graphs (use Canvas).

Common mistakes

  • Confusing dendrogram with org chart — dendrogram aligns ALL leaves at a single edge regardless of branch depth, which is wrong for org structures where reporting depth is meaningful
  • Hundreds of leaves on a fixed-size SVG — leaves overlap. Either grow the SVG or paginate the tree
  • Mutating the root object in place — the layout pass treats input as immutable; always provide a new root reference on data change

Accessibility

The SVG carries role="img" with a <title> and <desc> summarizing the leaf count and root label. For agent outputs, expose a parallel <ul> grouping leaves by their parent so screen-reader users get the clustering structure.

Token budget: 320

Verified against @hex-core/components@1.12.0

Edit this page on GitHub