Getting StartedInstallation and setup guides 5
LayoutWorkflow and structural layout components 7
OverlayModal and floating layer surfaces 3
FeedbackStatus, empty, progress, and loading placeholder patterns 5
FormInput and selection components 17
UtilityGeneral-purpose interface utilities 7
NavigationMenu surfaces and hierarchical actions 7
Overview API Styling Examples

Tree overview

Tree renders hierarchical explorers and settings panels from a flat node model. The wrapper ships with minimum row, toggle, and depth styling while preserving the underlying tree contract for teams that need deeper customization later.

Imports

Use the wrapper for flat node data, or reach for primitives on the headless page when you need full markup control.

Primitive import

ts
import { TngTree, TngTreeItem, TngTreeGroup, TngTreeIndicator } from '@tailng-ui/primitives';

Component import

ts
import { TngTree, type TngTreeItem } from '@tailng-ui/components';

Wrapper variants

The same wrapper tree rendered inside plain CSS and Tailwind shells.

Wrapper tree (plain CSS)

Keyboard navigation

  • ArrowUp / ArrowDown — move active node within visible rows.
  • ArrowRight — expand a collapsed branch or move to its first child.
  • ArrowLeft — collapse an expanded branch or move to its parent.
  • Enter / Space — select the active node.
  • Home / End — jump to the first or last visible node.
  • Type letters — typeahead search by node label.

Accessibility baseline

  • Root container exposes role="tree" with aria-label.
  • Each node uses role="treeitem" with aria-expanded for branches.
  • Selection state is tracked via aria-selected.
  • Disabled nodes surface aria-disabled="true".