AngularAdmin dashboard

material-angular-dashboard — Angular Admin dashboard Template

By lightdev627

A dark admin dashboard template built on Angular and Google Material Design, including charts and advanced table components, released under the MIT license and free for commercial use.

Explore the design

Compare the page layouts and mobile experience. Open any screenshot for a closer look.

1 previews
Desktop homepage
Desktop captureTop of page

Actual screenshot captured by the server browser.

One original preview is available. Open the full image to inspect the design.

Screenshots show visual appearance; interactive behavior may differ.

Recorded 2026-10-02View source

What stands out

A quick read of the recorded project description.

01

Dark Material Design interface following Google Material Design guidelines

02

Uses Angular, TypeScript, and Sass, with styles structured using BEM

03

Charts based on D3 and NVD3, tables using ag-Grid

04

Provides three branches: starter-kit, feature/backend, and feature/serverless

05

MIT license, permitting free use, modification, commercial use, and distribution of this version of the code

Template Details

Material Angular Dashboard is an Angular admin dashboard template whose interface follows Google Material Design guidelines, presented with a dark theme and suited to building data-intensive admin interfaces. The repository uses the MIT license, permitting free use, modification, commercial use, and distribution of this version of the code.

Technically, the template uses Angular, TypeScript, and Sass, with styles organized using BEM; theme variables can be adjusted by editing src/theme/scss/_variables.scss. Charts are built with D3 and NVD3, tables use ag-Grid, and a material-angular-select component is also included.

The project provides a starter-kit branch for quickly starting after stripping out extra pages and modules; a feature/backend branch with a preconfigured Node.js backend that includes authentication and routing capabilities; and a feature/serverless branch demonstrating deployment based on AWS Lambda. The README notes that the project is still under active development, and future features can be tracked in the repository issue list. Third-party assets such as demo images, fonts, and icons must be checked separately under their respective licenses, and external services such as domains, hosting, and databases may incur separate charges.

AngularBackend

Is it right for your project?

Use Cases

  • Building a dark admin interface that requires charts and data tables
  • Using the starter-kit branch as a base to quickly start a project after removing extra pages
  • Referencing the feature/backend branch to add authentication and routing to an admin panel
  • Referencing the feature/serverless branch to try an AWS Lambda-based deployment approach

Suitable For

  • Admin projects using the Angular stack
  • Data interfaces that need a dark Material Design theme
  • Teams wanting to build on MIT-licensed code for secondary development or commercial use
  • Admin dashboards that need charts and advanced table components

Getting started & customization

Use these recorded setup notes alongside the repository instructions for your chosen version.

  1. 1

    After cloning the repository, run npm install to install dependencies

  2. 2

    Install @angular/cli globally

  3. 3

    Start the development server with npm start or ng serve; the default address is http://localhost:4200/

  4. 4

    Build with npm run build or ng build; output goes to the dist/ directory

  5. 5

    Theme variables can be adjusted by editing src/theme/scss/_variables.scss

Read repository instructions

License & source material

Usage conditions & limitations

Free to use · keep license notice

This entry covers the free version under the MIT license in the public repository; the free scope applies to this version of the code and does not mean external services or third-party assets are free.

Must comply with when using

  • Permits free use, modification, commercial use, and distribution of this version of the code.
  • When distributing copies or substantial portions of the code, retain the original author's copyright notice and the full MIT license notice.
  • The code is provided as is; warranties and limitations of liability are governed by the original license and applicable law.

Additional costs & items to verify

  • The authentication demo in the feature/backend branch requires access to an external demo site and logging in with the given demo account credentials; this is an external service dependency and not ready to use locally out of the box.
  • The deployment approach in the feature/serverless branch depends on external cloud services such as AWS Lambda; using it requires setting up an AWS account and bearing the corresponding costs.
  • The README provides contact information for paid custom development and commercial collaboration; this is an optional additional commercial service and does not affect free use of the code under the MIT license.
  • Demo images, fonts, icons, and other third-party assets must be checked under their respective licenses and cannot be judged solely by the code's MIT license.
  • External services such as domains, hosting, databases, payments, or AI may incur separate charges.
View Original Text Basis

Permission is hereby granted, free of charge

Original License Text

You can also try the [demo](http://dashboard-auth-demo.creativeit.io) (user: [email protected] , password: admin).

Original README

You can also try dashboard powered with [AWS Lambda](https://aws.amazon.com/lambda/). This allows you to easily deploy your application without the need for a dedicated server.

Original README

We are ready to become a strong development partner and bring competitive advantage to your business. Visit our site [creativeit.io](http://creativeit.io/) or drop us a line <[email protected]>.

Original README
https://github.com/lightdev627/material-angular-dashboard/blob/master/LICENSEhttps://github.com/lightdev627/material-angular-dashboard/blob/master/README.md

Compiled by DeepSeek based on repository license and README ·2026-10-02. Results only cover the materials read; dependencies, images, fonts, and subsequent term changes are subject to their respective original texts.

Project checks & description sources

Template Information

Source platforms
GitHub
Documentation and maintenance reference score
Partly documented · 74 / 100
Technologies
Angular
Website type
Admin dashboard
How this score is calculated

Our heuristic uses license records (up to 30), a demo link (12), a preview (10), stars (15), recorded maintenance (15), description completeness (8), feature records (5) and classification data (5). It is not a code, security or performance test, or a Google score. A link does not establish tested functionality.

What to verify for this project

Repository update recorded
2025-07-10
Screenshot last checked
2026-10-02

A demo link is listed. Check it with your own content and viewport sizes; its presence does not confirm that forms, authentication or payments work.

The catalog identifies Angular as the primary stack. Check the actual dependency manifest and lockfile for versions and hosting requirements. These notes use recorded metadata, not a code audit or a deployment test.

Use a selection guide →

How this description was prepared

AI-assisted description based on catalog records and repository material. Repository authors are not automatically the reviewers of this description.

Automatically checked against source and license rules; no manual editorial review.

Inspect the recorded source material

SHA-256: 363f65cf78d0f908fd4f5fc477e449c581a8ae3acc06c7e293ec9ac16d3070c1

2026-10-02T17:53:54.976Z

Source file / repository
# Material Angular Dashboard

Welcome to the first dark dashboard with Google Material Design and Angular!

<a target="_blank" href="http://material-angular-dashboard.creativeit.io/"><img src="https://trello-attachments.s3.amazonaws.com/55f8466d8f95075bca20dd66/5bf421455ab0f05102cadac9/eee32e50e9fc278b715442a3fc6f65aa/Readme.png"/></a>

Its much more fun with the [demo](http://material-angular-dashboard.creativeit.io).

Material admin template is absolutely free for commercial usage theme, based on Google Material Design guidelines.

> **Important**: We are still working on the project and there will be much more awesome, check out our [issues](https://github.com/CreativeIT/material-angular-dashboard/issues) to see what features are coming soon.

# SETUP and USAGE

The steps below will take you through cloning your own fork, installing dependencies and building:

1. Fork and/or clone our repository. To use Git from command line, see the [Setting up Git](https://help.github.com/articles/set-up-git/) and [Fork repo](https://help.github.com/articles/fork-a-repo/) articles.

```bash
git clone https://github.com/CreativeIT/material-angular-dashboard.git
```

2. Open your copied repo folder in terminal and install necessary modules with command, make sure that you have installed [npm](https://www.npmjs.com/get-npm):

```bash
npm install
```

3. Install [angular-cli](https://cli.angular.io/) globally to use its commands in the terminal:

```bash
npm install --global @angular/cli
```

4. Now you are able to run or build the project:

Run `npm start` or `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.

Run `npm run build` or `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.

# FEATURES

* Angular

* [Material Design](http://www.google.com/design/spec/material-design/introduction.html)

* TypeScript

* Responsive dark material design. DARK, Carl!

* User experience focused

* [Sass](http://sass-lang.com/)

* [D3](https://d3js.org/) and [NVD3](http://nvd3.org/)

* [ag-Grid](https://www.ag-grid.com)

* [material-angular-select](https://github.com/CreativeIT/material-angular-select)

* MIT License

# Additional

Since the project uses [BEM](http://getbem.com) structure with sass, it can be customized in an easy way by editing `src/theme/scss/_variables.scss` file.

Project uses [d3](https://d3js.org/) and [nvd3](http://nvd3.org/) to build charts and chart components and [ag-Grid](https://www.ag-grid.com) to build advanced tables.

# Quick start
Do you want to start quickly and don't need all the pages and modules? You can checkout to empty 
[starter-kit branch](https://github.com/CreativeIT/material-angular-dashboard/tree/starter-kit) and get to work!

If you need full-stack solution with authentication ability and routing, checkout
[feature/backend branch](https://github.com/CreativeIT/material-angular-dashboard/tree/feature/backend) with preconfigured Node.js backend.
You can also try the [demo](http://dashboard-auth-demo.creativeit.io) (user: [email protected] , password: admin).

You can also try dashboard powered with [AWS Lambda](https://aws.amazon.com/lambda/). This allows you to easily deploy your application without the need for a dedicated server.
Checkout [feature/serverless branch](https://github.com/CreativeIT/material-angular-dashboard/tree/feature/serverless) to see the details or try the [demo](https://g5ope910kg.execute-api.eu-central-1.amazonaws.com/production/) (user: [email protected] , password: admin) to make sure that this is no different from the classic approach.

# Hire us

We are ready to become a strong development partner and bring competitive advantage to your business. Visit our site [creativeit.io](http://creativeit.io/) or drop us a line <[email protected]>. We will be happy to help you!

# Credits

Material Angular Dashboard was inspired by [html5 material dashboard](https://github.com/CreativeIT/material-dashboard-lite)

Designed with passion and coffee by CreativeIT.

# Support the project

* Star the repo :star:

* Create an issue report or feature request

* Follow us on [Twitter](https://twitter.com/intent/follow?screen_name=CreativeITeam)
Report a correction

Explore similar templates

Compare previews and descriptions within the same stack and category.