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

Tree Table styling

Tree table styling follows the same BEM + CSS-variable convention as tng-table. Stable class names provide hooks for custom CSS and Tailwind utilities; CSS custom properties cascade from the host element.

ClassUse
.tng-tree-table__rootOuter wrapper: border, radius, background, overflow scroll.
.tng-tree-tableThe native <table>: typography, layout, width.
.tng-tree-table__header-cellHeader cells: background, weight, border, alignment.
.tng-tree-table__cellBody cells: background, padding, border, hover.
.tng-tree-table__tree-cell The tree column's body cell (also has .tng-tree-table__cell): flex row containing indent, toggle, and content.
.tng-tree-table__indentInline-block spacer whose width is level × indentSizepx.
.tng-tree-table__toggleExpand/collapse button: sizing, background, focus ring.
.tng-tree-table__toggle-placeholderSame-size invisible spacer for non-expandable rows (keeps alignment).
.tng-tree-table__toggle-iconInner icon span inside the toggle button.
.tng-tree-table__cell-contentFlex child that takes the remaining cell width after indent and toggle.
.tng-tree-table__row Body row. Data attributes: [data-level], [data-expanded], [data-selected], [data-disabled].
.tng-tree-table__empty-cellFull-width empty-state cell.
.tng-tree-table__loading-cellFull-width loading-state cell.

CSS custom properties

All design tokens cascade from the host. Each variable has a fallback to a --tng-semantic-* token so the component works out of the box without overrides.

VariableFallbackDescription
--tng-tree-table-border--tng-semantic-border-subtleBorder color used for the outer wrapper and cell dividers.
--tng-tree-table-radius0.65remBorder radius of the root wrapper.
--tng-tree-table-cell-px0.9remHorizontal cell padding.
--tng-tree-table-cell-py0.75remVertical cell padding (halved in compact density).
--tng-tree-table-header-bgColor-mixed surface/baseHeader row background color.
--tng-tree-table-row-bg--tng-semantic-background-surfaceDefault body cell background.
--tng-tree-table-row-hover-bgColor-mixed foreground/surfaceCell background on row hover.
--tng-tree-table-row-selected-bgColor-mixed foreground/surface (slightly stronger)Cell background for selected rows.
--tng-tree-table-toggle-color--tng-semantic-foreground-secondaryColor of the toggle icon.
--tng-tree-table-toggle-hover-bgColor-mixed foreground/surfaceToggle button background on hover.
tng-tree-table {
  --tng-tree-table-border: var(--tng-semantic-border-subtle);
  --tng-tree-table-radius: 0.75rem;
  --tng-tree-table-cell-px: 1rem;
  --tng-tree-table-cell-py: 0.75rem;
  --tng-tree-table-header-bg: var(--tng-semantic-background-muted);
}

Data attribute hooks

Row state is reflected as data attributes on the <tr> element so you can write CSS selectors without class-based logic. 

/* Style selected rows */
.tng-tree-table__row[data-selected] .tng-tree-table__cell {
  background: var(--my-selected-row-bg);
}

/* Dim rows by nesting level */
.tng-tree-table__row[data-level="1"] .tng-tree-table__cell {
  opacity: 0.85;
}

/* Style the toggle when expanded */
.tng-tree-table__toggle[data-expanded] {
  color: var(--tng-semantic-accent-primary);
}