Taiga UI based library for developing documentation portals for Angular libraries.
npm install @taiga-ui/addon-doc
Downloads per week

Taiga UI โ€” Doc

npm version npm bundle size Discord

Taiga UI based library for developing documentation portals for Angular libraries.

How to install

Install main packages:

npm i @taiga-ui/{cdk,core,kit}

Install doc:

npm i @taiga-ui/addon-doc

How to use

You can also see community made guide in Russian

  1. Include TuiDocMainModule in your App module and use in your template:

    <tui-doc-main>You can add content here, it will be shown below navigation in the sidebar</tui-doc-main>
  2. Configure languages to highlight in your main module:

    import {NgModule} from '@angular/core';
    import {TuiDocMainModule} from '@taiga-ui/addon-doc';
    import {hljsLanguages} from './hljsLanguages';
    import {HIGHLIGHT_OPTIONS, HighlightLanguage} from 'ngx-highlightjs';
    import {AppComponent} from './app.component';
      bootstrap: [AppComponent],
      imports: [TuiDocMainModule],
      declarations: [AppComponent],
      providers: [
          provide: HIGHLIGHT_OPTIONS,
          useValue: {
            coreLibraryLoader: () => import('highlight.js/lib/core' as string),
            lineNumbersLoader: () => import('highlightjs-line-numbers.js' as string), // Optional, only if you want the line numbers
            languages: {
              typescript: () => import('highlight.js/lib/languages/typescript' as string),
              less: () => import('highlight.js/lib/languages/less' as string),
              xml: () => import('highlight.js/lib/languages/xml' as string),
    export class AppBrowserModule {}
  3. Configure documentation providers:

    TUI_DOC_PAGES โ€” an array of pages, see TuiDocPages type

    TUI_DOC_LOGO โ€” an src for the SVG logo in the sidebar

    TUI_DOC_DEFAULT_TABS โ€” an array of default named for tabs on your typical page

    TUI_DOC_TITLE โ€” a title prefix for the browser tab

    TUI_DOC_SEE_ALSO โ€” a two dimensional array of related pages by their titles

  4. Configure routing:

    import {Routes} from '@angular/router';
    const appRoutes: Routes = [
        path: 'super-page',
        loadChildren: '../super-page/super-page.module#SuperModule',
        data: {
          title: 'Super Page',
      // ...

    You must have title in route data in order for TUI_DOC_SEE_ALSO to work. It would also be automatically added to TUI_DOC_TITLE for browser tab title when navigating to that route.

  5. Create pages.


    import {NgModule} from '@angular/core';
    import {RouterModule} from '@angular/router';
    import {generateRoutes, TuiAddonDocModule} from '@taiga-ui/addon-doc';
    import {SuperComponent} from './super.component';
      imports: [TuiAddonDocModule, RouterModule.forChild(generateRoutes(SuperComponent))],
      declarations: [SuperComponent],
      exports: [SuperComponent],
    export class SuperModule {}


    import {Component} from '@angular/core';
      selector: 'super-component',
      templateUrl: './account.template.html',
    export class SuperComponent {
      // Keys would be used as tabs for code example
      readonly example = {
        TypeScript: import('!!raw-loader!./examples/1/index.ts'),
        HTML: import('!!raw-loader!./examples/1/index.html'),
      readonly inputVariants = ['input 1', 'input 2'];


      <ng-template pageTab>
        <!-- default tab name would be used -->
        This would be the content of a first tab
          heading="Example of usage"
      <ng-template pageTab="Documentation">
          <super-component [input]="input"></super-component>
            Some input