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

Examples

Use one editor contract across languages, themes, and form states.

Language examples

Edit JSON and shell source with the same adapter-based editor contract.

Language examples (Plain CSS)

code-editor-language-example.component.ts

ts
import { Component, signal } from '@angular/core';
import { TngCodeEditorComponent } from '@tailng-ui/components';

@Component({
  selector: 'app-code-editor-language-example',
  standalone: true,
  imports: [TngCodeEditorComponent],
  templateUrl: './code-editor-language-example.component.html',
  styleUrl: './code-editor-language-example.component.css',
})
export class CodeEditorLanguageExampleComponent {
  readonly jsonSource = signal('{\n  "retries": 3,\n  "mode": "safe"\n}');
  readonly shellSource = signal('pnpm run test:components\npnpm run build:docs');
  readonly codeTheme = signal<'github-dark' | 'github-light'>('github-light');
}

Readonly and disabled

Compare selectable readonly source with a fully disabled editor.

Readonly and disabled (Plain CSS)

code-editor-form-states-example.component.ts

ts
import { Component, signal } from '@angular/core';
import { TngCodeEditorComponent } from '@tailng-ui/components';

@Component({
  selector: 'app-code-editor-form-states-example',
  standalone: true,
  imports: [TngCodeEditorComponent],
  templateUrl: './code-editor-form-states-example.component.html',
  styleUrl: './code-editor-form-states-example.component.css',
})
export class CodeEditorFormStatesExampleComponent {
  readonly jsonSource = signal('{ "mode": "readonly" }');
  readonly shellSource = signal('echo "Disabled command"');
  readonly codeTheme = signal<'github-dark' | 'github-light'>('github-light');
}
Readonly and selectable
Disabled

Plain fallback

Turn highlighting off when source editing is useful without loading a language adapter.

Plain fallback (Plain CSS)

code-editor-fallback-example.component.ts

ts
import { Component, signal } from '@angular/core';
import { TngCodeEditorComponent } from '@tailng-ui/components';

@Component({
  selector: 'app-code-editor-fallback-example',
  standalone: true,
  imports: [TngCodeEditorComponent],
  templateUrl: './code-editor-fallback-example.component.html',
  styleUrl: './code-editor-fallback-example.component.css',
})
export class CodeEditorFallbackExampleComponent {
  readonly plainSource = signal('<unsafe> remains visible as text');
}

Highlighting is disabled, so no language adapter is loaded.