# Taiga UI — Doc
[](https://npmjs.com/package/@taiga-ui/addon-doc)
[](https://bundlephobia.com/result?p=@taiga-ui/addon-doc)
[](https://discord.gg/Us8d8JVaTg)
> Taiga UI based library for developing documentation portals for Angular libraries.
## How to install
Install main packages:
```
npm i @taiga-ui/{cdk,core,kit,addon-mobile}
```
Install doc:
```
npm i @taiga-ui/addon-doc
```
## How to use
> You can also see [community made guide](https://habr.com/ru/company/europlan/blog/559804/) in Russian
1. Include `TuiDocMainModule` in your App module and use in your template:
```html
You can add content here, it will be shown below navigation in the sidebar
```
2. Configure languages to highlight in your main module:
```typescript
import {Component} from '@angular/core';
import {TuiDocMainModule} from '@taiga-ui/addon-doc';
import {hljsLanguages} from './hljsLanguages';
import {HIGHLIGHT_OPTIONS, HighlightLanguage} from 'ngx-highlightjs';
import {App} from './app.component';
@Component({
standalone: true,
imports: [TuiDocMainModule],
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 App {}
```
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
`TUI_DOC_SEARCH_ENABLED` — enable doc search. Default value is true
4. Configure routing:
```typescript
import {Routes} from '@angular/router';
const appRoutes: Routes = [
{
path: 'super-page',
loadChildren: async () => (await import('../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.
_Module:_
```ts
import {TuiAddonDoc} from '@taiga-ui/addon-doc';
@Component({
standalone: true,
imports: [TuiAddonDoc, SuperComponent],
})
export class App {}
```
_Component:_
```ts
// ..
@Component({
standalone: true,
selector: 'super',
templateUrl: './super.component.html',
})
export class Super {
// Keys would be used as tabs for code example
readonly example = {
// import a file as a string
TypeScript: import('./examples/1/index.ts?raw'),
HTML: import('./examples/1/index.html?raw'),
};
readonly inputVariants = ['input 1', 'input 2'];
}
```
> You can use any tool to import a file as a string. For example, you can use
> [Webpack Asset Modules](https://webpack.js.org/guides/asset-modules/).
_Template:_
```html
This would be the content of a first tab
Some input
```