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

Styling contract

Code Editor is token-first and exposes stable slots and render states without requiring consumers to depend on its overlay DOM order.

Theme tokens

Surface, border, focus, foreground, caret, selection, typography, and padding can be customized through --tng-code-editor-* properties.

code-editor.tokens.css

css
.editor-shell {
  --tng-code-editor-bg: #0b1220;
  --tng-code-editor-border: #334155;
  --tng-code-editor-fg: #dbeafe;
  --tng-code-editor-font-family: 'Fira Code', monospace;
  --tng-code-editor-line-height: 1.65;
  --tng-code-editor-selection: rgb(59 130 246 / 32%);
}

Slot and state hooks

  • data-slot="code-editor" identifies the surface.
  • data-slot="highlight-layer" identifies the visual overlay.
  • data-slot="textarea" identifies the native control.
  • data-state reports idle, highlighting, highlighted, or error.
  • data-disabled and data-readonly expose form state.

Overlay invariant

The highlight and textarea layers must keep identical font, letter spacing, line height, padding, tab size, and whitespace behavior. Override the public editor tokens rather than styling only one layer.