Get started

Installation

Install the packages, provide a theme and render your first component — a few minutes from an empty Angular app. Each component is its own entry point, so only what you import lands in your bundle.

1. 1

   Install

   Take everything at one version, or only the packages you need.

   EverythingPick packages

   npmpnpmyarnbun

   ComponentsEvery component, one entry point each. Core, themes, tokens and icons come with it.BlocksLayouts, filters, kanban, wizard, command palette and more.Brand logosLogos of well-known brands for the icon component.Country flagsFlags for the country select, loaded one by one.ChartsLine, column, combo, scatter, pie, radar, radial bar, gauge, funnel, waterfall, bullet, candlestick, box plot, range area, gantt, sankey, sunburst, bar list, segmented bar, heatmap, treemap, rank and org charts drawn as SVG, no chart library; SVG / PNG / CSV download.UtilitiesDate, relative time, plural and file size pipes; debounced input, copy, in view and drag scroll directives; validators, filter state, HTTP params, retries and polling.QR codesOwn encoder in plain TypeScript, no dependencies.Rich text editorIts own package — tectra-ng does not include it.Code editorCode editor, diff and highlighted code. Its own package — tectra-ng does not include it.

   $npm install tectra-ng
2. 2

   Provide a theme

   Pick a style, a primary colour and a surface — the code follows. Every value can be changed later with tokens.

   Style

   TectraSoftEdgePaper

   Primary

   Surface

   Preview on this site

   app.config.ts

   import { provideTectra } from '@tectra-ng/core/config';
   import { createTectraPreset } from '@tectra-ng/themes';
   
   export const appConfig: ApplicationConfig = {
     providers: [
       provideTectra({ preset: createTectraPreset({ primary: 'blue' }) }),
     ],
   };

3. 3

   Use a component

   Import it into a standalone component and use it in the template. That is the whole setup.

   city-field.ts

   import { TxSelect } from '@tectra-ng/ui/select';
   
   @Component({
     imports: [TxSelect, ReactiveFormsModule],
     template: `<tx-select [options]="cities" [formControl]="city" placeholder="Pick a city" />`,
   })
   export class CityField {
     readonly cities = ['Kyiv', 'Lviv', 'Odesa', 'Kharkiv'];
     readonly city = new FormControl<string | null>(null);
   }

   Result

   Pick a city

   Nothing picked yet

Optional

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  rel="stylesheet"
  href="https://fonts.googleapis.com/css2?family=Onest:wght@100..900&family=JetBrains+Mono:wght@400;500&display=swap"
/>

provideTectra({ preset: Tectra, mode: 'dark' });

inject(TxThemeService).toggleMode();

provideTectra({ preset: Tectra, locale: 'ua' });

inject(TxLocaleService).setLocale('us');

import { provideTxBrandIcons } from '@tectra-ng/brand-icons';
import { loadTxFlag } from '@tectra-ng/flags';
import { provideTxFlags, txFlagImages } from '@tectra-ng/ui/country';

providers: [
  provideTxBrandIcons(),
  provideTxFlags(txFlagImages(loadTxFlag)),
];

import { TxEditor } from '@tectra-ng/editor';

@Component({
  imports: [TxEditor],
  template: `<tx-editor [(html)]="text" height="320px" />`,
})
export class NoteField {
  readonly text = signal('<p>Hello</p>');
}

import { TxCodeEditor } from '@tectra-ng/code-editor';

@Component({
  imports: [TxCodeEditor, ReactiveFormsModule],
  template: `<tx-code-editor language="html" [formControl]="markup" height="400px" />`,
})
export class TemplateField {
  readonly markup = new FormControl('<h1>Hello</h1>');
}

provideTectra({
  preset: Tectra,
  ripple: true,
  overlay: { viewportInsets: { top: 64 } },
  validationMessages: { required: 'Fill this in' },
  pt: { button: { root: { class: 'app-button' } } },
});

Next steps