sysdesign2023

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 💯