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 styling

The default separator resolves through TailNG semantic tokens and includes dark-mode and forced-colors behavior.

CSS custom properties

Workspace split tokens

css
tng-split-group.workspace-split {
  --tng-split-handle-width: 1px;
  --tng-split-handle-hit-area: 10px;
  --tng-split-separator-color: var(--tng-semantic-border-default);
  --tng-split-separator-hover-color: var(--tng-semantic-accent-brand);
  --tng-split-separator-active-color: var(--tng-semantic-accent-brand);
  --tng-split-focus-ring: 0 0 0 3px var(--tng-semantic-focus-ring);
  --tng-split-pane-background: var(--tng-semantic-background-surface);
  --tng-split-disabled-opacity: 0.65;
  --tng-split-handle-indicator-display: block;
}

State hooks

Panes expose data-collapsed, data-resizing, and data-disabled. Groups expose orientation, disabled, resizing, and data-constrained when the container is smaller than the combined minimums. Handles expose orientation, disabled, and resizing states.

Fully collapsed zero-size panes also receive inert and aria-hidden="true". Use the pane state hook to swap full content for an icon rail at nonzero collapsed sizes.