Skip to content

Tree

GraphTree

Nested tree with branch glyphs. Accent a node to highlight it.

Command

pnpm dlx shadcn@latest add <origin>/r/graph-tree.json

Registry

Nested nodes. Accent the file you care about.

[ REGISTRY ]
  • registry/default
  • graph-frame
  • graph-frame.tsxui
  • graph-motion.tslib
  • graph-tree
  • graph-tree.tsxui
Tree with 6 nodes

Team

Same component. Org chart, not a filesystem.

[ ON CALL ]
  • platform
  • apipriya
  • workersjon
  • edgemina
Tree with 4 nodes

Props

PropTypeDefaultDescription
titlestringCaption drawn on the top edge of the frame.
nodesTreeNode[]Nested nodes. Each may have label, meta, accent, and children.
cornerstring"+"Character at each corner of the frame.
classNamestringPassed to the outer frame.