Getting StartedInstallation and setup guides 6
FormInput and selection components 27
FlowWorkflow graph and execution surfaces 4
LayoutStructural layout components 9
NavigationMenu surfaces and hierarchical actions 7
OverlayModal and floating layer surfaces 3
FeedbackStatus, empty, progress, and loading placeholder patterns 6
UtilityGeneral-purpose interface utilities 7
Overview API Styling Examples

Required styles

Import @tailng-ui/flow/styles.css once so the underlying graph, ports, connections, drag previews, palette items, and execution presentation render correctly.

Layout sizing

Set the host height with --tng-flow-workbench-height or regular CSS. The palette, graph, and details panels use fixed minimum sizes so controls and canvas interactions do not collapse in narrow containers.

Panels

The palette uses --tng-flow-workbench-palette-width; details sizing is controlled by rightDetailsSize, bottomDetailsSize, and detailsPosition. In auto mode, details move below the graph when the container is narrow.