Getting StartedInstallation and setup guides 6
FormInput and selection components 26
LayoutWorkflow and structural layout components 10
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

Split Layout

Split Layout composes two or more pixel-constrained panes with pointer and keyboard resize handles. Applications keep ownership of controlled size, collapse, breakpoint, and persistence state.

Component imports

ts
import {
  TngSplitGroupComponent,
  TngSplitHandleComponent,
  TngSplitPaneDirective,
  type TngSplitResizeEvent,
} from '@tailng-ui/components';

Workspace layout

Resize the palette, inspector, or nested JSON panel. Press Enter on a handle to toggle its collapsible pane; the palette preserves a 56px icon rail while the other panels collapse to zero.

Workflow workspace (Plain CSS)

Workflow canvasFlexible center workspace
JSON preview{ "workflow": "ready" }

Accessibility baseline

  • Handles expose separator role, orientation, adjacent pane ids, and pixel value ranges.
  • Arrow keys resize; Shift uses the large step; Home and End move to boundaries.
  • Enter toggles the selected collapsible pane and focus rings remain visible.
  • Horizontal behavior follows application direction in RTL layouts.