@junte/ui

Quality Angular UI components kit

Rich & fully native components collection for your beautiful 🤩 angular apps!

See more demos here 👉 https://junte-ui.com/

Killer features

• 60 native components - no third parties
• separated styles from components with themes support
• building your own iconsets
• SASS mixins API for customizing components in the context
• useful builders for each component with code generation
• mobile components adaptation from box

How to install

Install angular ngc if you have no yet.

sudo npm i -g @angular/cli

Create a new angular project

ng new junte-ui-test --style=scss --routing=false
cd junte-ui-test

Install Junte UI package

npm install @junte/ui  --save-dev

Import Junte UI & Browser Animations modules into your app module in src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { JunteUiModule } from '@junte/ui';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    JunteUiModule.forRoot(), 
    BrowserAnimationsModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Import styles and assets in angular.json

{
  "options": {
    "assets": [
      {
        "glob": "**/*",
        "input": "node_modules/@junte/ui/lib/assets/fonts/junte-ui-icons-default/",
        "output": "./assets/fonts/icons/"
      },
      {
        "glob": "**/*",
        "input": "node_modules/@junte/ui/lib/assets/icons/animated/",
        "output": "./assets/icons/animated/"
      },
      {
        "glob": "**/*",
        "input": "node_modules/@junte/ui/lib/assets/icons/svg/",
        "output": "./assets/icons/svg/"
      }
    ],
    "styles": [
      "src/styles.scss",
      "node_modules/@junte/ui/lib/assets/fonts/junte-ui-icons-default/junte-ui-icons-default-font.scss",
      "node_modules/@junte/ui/lib/assets/fonts/open-sans/regular-400.scss"
    ]
  }
}

Import the styles into the global app styles src/styles.scss

/* You can add global styles to this file, and also import other style files */
@import "~@junte/ui/lib/assets/styles/jnt-all";
@import "~@junte/ui/lib/assets/styles/jnt-common";
body {
      font-family: $jnt-font-family-base;
      font-weight: $jnt-font-weight-light;
      font-size: $jnt-font-size-normal;
      color: $jnt-primary-text-color;
      margin: 20px;
}

Bingo 👏 Start your project.

ng serve

It is a very fast but rude installation with importing all components & assets.

How to try

You can go to research all components specifications https://junte-ui.com/

For fast test add link to UI enum in src/app/app.component.ts

import { Component } from '@angular/core';
import { UI } from '@junte/ui';
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
})
export class AppComponent {
    ui = UI; // link to junte UI enum
}

Add jnt-button in to your src/app/app.component.html

<jnt-button text="Click on me"
    [icon]="ui.icons.user">
    <jnt-badge [value]="5"></jnt-badge>
</jnt-button>

You should see the button 😎

Problems 🙀? Please, add issue an here 👉 https://gitlab.com/junte/junte-ui/-/issues