@styloviz/tree-view

8 premium variants: collapsible tree, file explorer, tri-state checkboxes, org chart, tree table, searchable, drag & drop reordering and lazy load.

Part of the StyloViz UI Kit — a premium Angular 21 + Tailwind CSS 4 dashboard component library. Standalone, OnPush, strongly typed, dark-mode ready.

Installation

npm install @styloviz/tree-view

Requires @angular/core and @angular/common >= 21. Self-contained — no other StyloViz packages required. Prefer everything at once? @styloviz/all installs the whole free tier in one command.

Usage

import { SvTreeViewComponent } from '@styloviz/tree-view';

@Component({
  standalone: true,
  imports: [SvTreeViewComponent],
  template: `
    <sv-tree-view [nodes]="nodes" />
  `,
})
export class DemoComponent {}

Inputs

| Input | Type | Default | Description | | --- | --- | --- | --- | | nodes | TreeNode[] | [] | Tree node data (nested children, optional icons). | | selectable | boolean | true | Enable single-row selection highlight. | | showLines | boolean | true | Show vertical connector guide lines. |

Outputs

| Output | Type | Description | | --- | --- | --- | | nodeClick | TreeNodeClickEvent | — | | nodeExpand | TreeNode | — | | nodeCollapse | TreeNode | — | | nodeSelect | TreeNode | — |

Documentation

Full API reference and live demos: https://styloviz.dev/docs/tree-view

License

MIT