Sys Design 2023

SysDesign2023 is a front-end library that provides a set of reusable components and utility functions for building modern web applications. It is built on top of popular front-end frameworks Angular.

• ⚡ Built for speed
• ⬇️ No need to import modules for components
• ⚖️ Light-weight while implementing all sys features from the supported scss/css custimization
• 🌐 Works in a browser, on a server, or from a command line interface (CLI)

Demo

Checkout the demo page to see sysDesign in action ⛹️

Docs

Our documentation pages are also rendered using SysDesign2023 💯

Component Status [ ✅ - Complete, 🚧 - Working ]

| Material | Dev Status | Documatation Status | | ----------- | ----------- | ----------- | | Header | ✅ | 🚧 | | Sidebar | ✅ | 🚧 | | Buttons | ✅ | 🚧 | | Tabs | ✅ | 🚧 | | cards | ✅ | 🚧 | | Tree | ✅ | 🚧 | | Slide Toggle | ✅ | 🚧 | | Dialog | ✅ | 🚧 | | Alerts | ✅ | 🚧 | | Inputs | ✅ | 🚧 | | Radios | ✅ | 🚧 | | Expension Panel | ✅ | 🚧 | | Table | ✅ | 🚧 |

Design Assets Status [ ✅ - Complete, 🚧 - Working ]

| Material | Design Status | Documatation Status | | ----------- | ----------- | ----------- | | Design Theme (Figma) | 🚧 | 🚧 | | Icons | 🚧 | 🚧 |

Compatibility

Node.js: Only current and LTS Node.js versions are supported. End of life Node.js versions may become incompatible with Marked at any point in time.

Browser: All Browser supported :)

Installation

Add in your project:

npm i sysdesign2023

After Install sysdesign2023 you also need to install material for icons:

ng add @angular/maetrial

Now import sysDesignModule from sysdesign2023 in your app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatIconModule } from '@angular/material/icon';
import { sysDesignModule } from 'sysdesign2023';

@NgModule({
  declarations: [
    AppComponent,

  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
  >>>  sysDesignModule,
    MatIconModule,
    BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Get Started

Now You can start the building your application in angular with sysdesign2023 go to the documentation part from here documentation pages are also rendered using SysDesign2023 💯