ns-ui

Tree Box Drawing

File/directory tree drawn with real box-drawing connectors, whose glyphs redraw themselves as folders expand and collapse instead of static per-level guides.

Use when a tree whose connector glyphs (├── └── │) are the medium itself, drawn in monospace with a bottom-up retract sequence that flips a sibling's ├── into └── the instant its neighbor's row vanishes; pick tree-root-trace instead for an SVG-drawn indent guide with a continuous root-system animation.

Install

npx shadcn add https://design.helpmarq.com/r/tree-box-drawing.json
  • tree
  • navigation
  • file-tree
  • hierarchy
  • ascii
  • keyboard
  • sidebar

ns-ui / tree-box-drawing

arrow keys move · → expands · ← collapses · enter selects

Props

PropTypeDefaultDescription
labelstringAccessible name for the tree, e.g. "Project files".
nodesBoughNode[]
defaultExpandedIds?string[]Node ids expanded on first render, statically — no reveal sequence for these.
className?string