Tree

The ownable Tree install gives your app a local wrapper around hierarchical navigation and explorer flows so row visuals, density, and branch affordances can evolve with the product.

Why own Tree locally

Trees often pick up app-specific row rendering, iconography, and selection copy that change faster than the shared library surface. Local ownership keeps those presentation decisions in the same repo as the data model they represent.

Adapt row markup, icons, and badges for your explorer or information architecture.
Keep branch labels, empty states, and selection behavior close to product code.
Version tree presentation with the rest of the workspace shell instead of forking shared code.

What the install includes

The registry-backed tree install writes a local wrapper component, template, styles, and export barrel under your app so hierarchical navigation can be shaped around your own data model and shell conventions.

Ownable Install

Install Tree from the TailNG registry with the shadcn-like flow. This copies source files into your app so your team can own and evolve the implementation locally.

Install from registry

Run from your Angular workspace root.

pnpm dlx tailng add tree

npx tailng add tree

Generated files

The command scaffolds local files under src/app/tailng-ui/tree.

src/app/tailng-ui/tree/tng-tree-primitive.ts
src/app/tailng-ui/tree/tng-tree.ts
src/app/tailng-ui/tree/tng-tree.html
src/app/tailng-ui/tree/tng-tree.css
src/app/tailng-ui/tree/index.ts

Import in your feature module/component

import { TngTree, TngTreePrimitive } from './tailng-ui/tree';

Usage

<tng-tree
  [nodes]="navigationNodes"
  [defaultExpandedIds]="['workspace', 'guides']"
  [defaultSelectedId]="'tree'"
  ariaLabel="Documentation tree"
/>

<!-- navigationNodes -->
<!--
readonly navigationNodes = [
  { id: 'workspace', label: 'Docs', description: 'Product documentation root' },
  { id: 'guides', label: 'Guides', parentId: 'workspace' },
  { id: 'navigation', label: 'Navigation', parentId: 'guides' },
  { id: 'tree', label: 'Tree', parentId: 'navigation' },
];
-->