Getting started

Set up access to Github NPM repository

You have to request access to a private Github repository to be able to log in. Let us know that you want to try out NPM packages, and we'll add you into our repository within 1 business day.

Let's add components custom NPM repository configuration. Create a .npmrc file with the following content in your project root folder. Make sure you don't have any other registries in your configs. Otherwise, you need to make our registry scoped to @crionic org or disable other registries.

.npmrc

registry=https://npm.pkg.github.com/crionic 
//npm.pkg.github.com/:_authToken=YOUR_AUTH_TOKEN

How to get personal auth token

npm sign in

npm login --registry=https://npm.pkg.github.com

Then you need to log into a repository by executing this command (enter your Github login, auth token instead of a password, and your Github email):

You can easily install Material-X UI using Angular CLI by running the following command:

Easily install Material-X

ng add @crionic/mat-x-theme

Or use this guide to install Material-X UI manually:

  1. Install libraries
  2. Include styles
  3. Root component
  4. Optional components
  5. Icons

  1. Install packages of Material-X UI

    Material-X UI packages

    npm i @crionic/{mat-x-theme,mat-x-cdk,mat-x-core,mat-x-kit,mat-x-i18n}

    Addon packages (opcional)

    		npm i @crionic/mat-x-addon-editor    // Rich text editor extension with related components
    		npm i @crionic/mat-x-addon-commerce  // Money-related extension with currencies, credit card inputs and validators
    		npm i @taiga-ui/addon-charts    // Components for various charts, graphs and visualizations
    		npm i @taiga-ui/addon-mobile    // Components and tools specific to mobile version of the app
    		npm i @taiga-ui/addon-table     // Interactive table component and related utilities
    		npm i @taiga-ui/addon-tablebars // Group action sliding toolbar
    		npm i @taiga-ui/addon-preview   // Custom fullscreen dialog to preview various content such as documents, images etc.

  2. Add theme and Material-X UI global styles to your angular.json :

    angular.json

    		{
    		  "projects": {
    		    "your-app": {
    		      "architect": {
    		        "build": {
    		          "options": {
    		            "styles": [
    		              "node_modules/@crionic/mat-x-theme/mat-x-theme.css",
    		              "src/styles.css"
    		            ]
    		          }
    		        }
    		      }
    		    }
    		  }
    		}
    You can use it with your pure CSS, SCSS and other projects. Angular resolves this scss file automatically
  3. Many of our components need your app to be wrapped into tui-root . Import TuiRootModule in your main module.

    app.module.ts

    		import {NgModule} from '@angular/core';
    		import {BrowserModule} from '@angular/platform-browser';
    		import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
    		import {TuiRootModule} from '@crionic/mat-x-core';
    		import {AppComponent} from './app.component';
    		 
    		@NgModule({
    		    declarations: [
    		        AppComponent,
    		    ],
    		    imports: [
    		        BrowserModule,
    		        BrowserAnimationsModule,
    		        TuiRootModule,
    		        // ...
    		    ],
    		    bootstrap: [AppComponent],
    		})
    		export class AppModule {
    		}

    Wrap all content of your app with root component

    app.component.html

    		<tui-root>
    		    <!-- content of your app -->
    		 
    		    <!--
    		     If you need, you can add something between Taiga portal layers:
    		    -->
    		    <ng-container ngProjectAs="tuiOverContent">
    		        <!-- Content over app content -->
    		    </ng-container>
    		    <ng-container ngProjectAs="tuiOverDialogs">
    		        <!-- Content over dialogs -->
    		    </ng-container>
    		    <ng-container ngProjectAs="tuiOverNotifications">
    		        <!-- Content over notifications -->
    		    </ng-container>
    		    <ng-container ngProjectAs="tuiOverPortals">
    		        <!-- Content over dropdowns -->
    		    </ng-container>
    		    <ng-container ngProjectAs="tuiOverHints">
    		        <!-- Content over hints -->
    		    </ng-container>
    		</tui-root>
  4. Material-X UI also has optional modules for dialogs and notifications. If you need these features, add modules into your app.module.ts

    app.module.ts

    		import {NgModule} from '@angular/core';
    		import {BrowserModule} from '@angular/platform-browser';
    		import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
    		import {
    		    TuiNotificationsModule,
    		    TuiDialogModule,
    		    TuiRootModule,
    		} from '@crionic/mat-x-core';
    		import {AppRoutingModule} from './app-routing.module';
    		import {AppComponent} from './app.component';
    		 
    		@NgModule({
    		    declarations: [
    		        AppComponent,
    		    ],
    		    imports: [
    		        BrowserModule,
    		        BrowserAnimationsModule,
    		        TuiRootModule,
    		        TuiNotificationsModule,
    		        TuiDialogModule,
    		        AppRoutingModule,
    		    ],
    		    bootstrap: [AppComponent]
    		})
    		export class AppModule {
    		}
  5. Icons are not included in the bundle.

    Install icons package

    npm i @taiga-ui/icons
     They go into your app's assets:

    angular.json

    		"assets": [
    		    {
    		        "glob": "**/*",
    		        "input": "node_modules/@taiga-ui/icons/src",
    		        "output": "assets/taiga-ui/icons"
    		    }
    		],
crionic.net
Buy Now