1. Project Overview

TinyNG

An enterprise-grade Web UI component library built with Angular + TypeScript.

TinyNG is a front-end UI component library built with Angular + TypeScript, designed to provide developers with a more efficient development experience and a consistent visual and interaction style. TinyNG has been used internally at Huawei for four years, supporting hundreds of enterprise products with outstanding stability and reliability.

Now, we are open-sourcing TinyNG so that more developers can experience the surprises and productivity improvements it brings. If you are looking for an Angular UI component library, we sincerely invite you to try TinyNG and enjoy its outstanding experience and endless possibilities. At the same time, we look forward to your feedback and suggestions to make TinyNG more complete and easier to use. We believe that open-sourcing TinyNG will bring it greater visibility and attention, encourage more people to participate, and make even greater contributions to its growth and development.

Welcome to TinyNG!

2. Open Source License

Licensed under MIT

3. Screenshots

4. Feature Overview

Features

• 70+ high-quality Angular components ready to use out of the box.
• Supports OnPush mode.
• Developed with TypeScript.
• Provides powerful theme configuration capabilities using CSS variables.
• Supports 5 international languages.

TinyNG includes a rich collection of user interface components that are easy to integrate and use. Currently, TinyNG has open-sourced more than 70 basic components and will gradually open-source over 100 components, covering a full range of enterprise-level scenarios and meeting the needs of various industries.

5. Tech Stack

Supported Environments

• Angular >=13.0.0
• Modern browsers

Edge

Firefox

Chrome

Safari

last 3 versions

last 3 versions

last 3 versions

last 2 versions

Installation

$ npm install @opentiny/ng

Usage

Import the component modules you want to use into your module.

import { TiButtonModule } from '@opentiny/ng';

@NgModule({
  imports: [ TiButtonModule ]
})
export class AppModule {
}

Then include the global stylesheet in the angular.json file.

{
  "styles": [
+    "node_modules/@opentiny/ng/themes/styles.css",
+    "node_modules/@opentiny/ng/themes/theme-default.css",
  ]
}

Refer to the Quick Start guide on the official website to learn more.

Development

$ git clone Repository clone URL
$ cd ng
$ npm install
$ npm start

The browser will open automatically.