AngularAdmin dashboard

admin-ui-template — Angular Admin dashboard Template

By open-template-hub

An Angular-based admin UI template offering reusable components, theme colors, and dark theme support.

Open Source Site Download Source ZIP

Explore the design

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

1 previews

Author preview

Visit websiteOpens in a new tab

Author-provided previewTop of page

Preview provided in the project README.

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

Screenshots show visual appearance; interactive behavior may differ.

Recorded 2026-09-30View source

What stands out

A quick read of the recorded project description.

Angular-based admin UI template with reusable components and theme color configuration

Provides dark theme support, with light interface screenshots and an online demo link in the README

Includes WebStorm run configurations covering install, build, start, debug, and dependency updates

Supports three starting paths: Heroku deployment, app-generator generation, and GitHub template creation

Supplementary documentation for favicon generation, cookie policy generation, and localization updates

Template Details

This template is the Admin UI Template published by Open Template Hub, built with Angular and positioned as a business admin interface. The README states that it includes reusable components, theme colors, and design support, and provides a dark theme. The repository also offers an online demo and screenshots so you can review the interface before adopting it.

For usage, the README lists three paths: one-click deployment via Heroku, generating the interface with @open-template-hub/app-generator, or creating a new project directly from this repository as a GitHub template. Local development depends on Node.js and npm, and the repository includes WebStorm run configurations covering install, build (local, local against staging API, staging, production), start (local, local against staging API, access from iPhone, staging, production), debug, and dependency checks and updates. The environment variable example only provides PORT=4202.

Other supporting notes include: brand color scales are generated with Colllor, favicon generation is described in docs/FAVICON_GENERATION.md, the cookie policy is generated using the cookiepolicygenerator site, localization is updated via updateMessages.run.xml, and outdated dependencies are recorded in docs/OUTDATED.md. The README does not provide a specific component list, routing structure, or backend API conventions; actual capabilities should be based on the repository code.

AngularBackend

Is it right for your project?

Use Cases

Building the front-end interface skeleton for an internal enterprise admin backend
Reusing its admin components and theme color system in an Angular project
Quickly initializing a new admin front-end repository as a GitHub template
Developing and debugging locally or against a staging API via WebStorm configurations

Suitable For

Backend front-end development teams using the Angular stack
Admin interface projects that need a dark theme and configurable theme colors
Developers who prefer to start from a template repository or generator rather than building from scratch

Getting started & customization

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

1
Node.js and npm must be installed first; specific versions are subject to package.json
2
The environment variable example is PORT=4202, which should be set according to the actual deployment environment
3
For local development, the repository-provided run configurations can be executed in the order install → buildLocal → startLocal → debug
4
Brand color scales, favicon, cookie policy, and localization rely on external tools or documented processes
5
Third-party assets such as demo images, fonts, and icons must have their licenses checked separately

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 is the code of this version and does not mean external services or third-party assets are free.

Must comply with when using

Free use, modification, commercial use, and distribution of this version's code are permitted.
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 one-click deployment path depends on the Heroku platform; using it requires a Heroku account and acceptance of its terms of service and possible charges.
Starting with the generator requires installing the @open-template-hub/app-generator package from npm, which is an external dependency.
Generating brand color scales requires the external Colllor website, not a built-in project feature.
Generating a cookie policy requires the external cookiepolicygenerator site; the project itself does not provide this feature.
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 additional charges.

View Original Text Basis

Permission is hereby granted, free of charge
Original License Text

Deploy this template to Heroku
Original README

Create your UI with UI Generator Package
Original README

we are using **[Colllor](http://colllor.com)**
Original README

use **[cookiepolicygenerator](https://www.cookiepolicygenerator.com)** site
Original README

https://github.com/open-template-hub/admin-ui-template/blob/develop/LICENSE https://github.com/open-template-hub/admin-ui-template/blob/develop/README.md

Compiled by DeepSeek based on repository license and README ·2026-10-01. 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: More documented · 83 / 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: 2026-05-06
Screenshot last checked: 2026-10-01

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: 7f4ee3b34c70aa5c2e89405c8a5cbcd3d0e4c0ed710e4d1d72af1ea250323a2b

2026-10-01T13:44:22.793Z

Source file / repository

<p align="center">
  <a href="https://opentemplatehub.com">
    <img src="https://raw.githubusercontent.com/open-template-hub/open-template-hub.github.io/master/assets/logo/ui/admin-ui-logo.png" alt="Logo" width=200>
  </a>
</p>

<h1 align="center">
Open Template Hub - Admin UI Template v5
</h1>

[![License](https://img.shields.io/github/license/open-template-hub/admin-ui-template?color=43b043&style=for-the-badge)](LICENSE)
[![Issues](https://img.shields.io/github/issues/open-template-hub/admin-ui-template?color=43b043&style=for-the-badge)](https://github.com/open-template-hub/admin-ui-template/issues)
[![PRCLosed](https://img.shields.io/github/issues-pr-closed-raw/open-template-hub/admin-ui-template?color=43b043&style=for-the-badge)](https://github.com/open-template-hub/admin-ui-template/pulls?q=is%3Apr+is%3Aclosed)
[![LastCommit](https://img.shields.io/github/last-commit/open-template-hub/admin-ui-template?color=43b043&style=for-the-badge)](https://github.com/open-template-hub/admin-ui-template/commits/master)
[![Release](https://img.shields.io/github/release/open-template-hub/admin-ui-template?include_prereleases&color=43b043&style=for-the-badge)](https://github.com/open-template-hub/admin-ui-template/releases)
[![Lighthouse](https://img.shields.io/badge/LIGHTHOUSE-report-43b043.svg?style=for-the-badge&logo=lighthouse)](docs/lighthouse)
[![SonarCloud](https://img.shields.io/sonar/quality_gate/open-template-hub_admin-ui-template?server=https%3A%2F%2Fsonarcloud.io&label=Sonar%20Cloud&style=for-the-badge&logo=sonarcloud)](https://sonarcloud.io/dashboard?id=open-template-hub_admin-ui-template)

Admin UI Template is a modern, responsive, and customizable admin UI template for your business. It contains reusable components, theme color, and design support along with dark theme support.

<h3 align="center">
  For demo click the image below ⬇️
</h3>

<p align="center">
  <a href="https://admin.opentemplatehub.com">
    <img src="https://raw.githubusercontent.com/open-template-hub/open-template-hub.github.io/master/assets/demo/ui/admin-ui-demo-light.png" alt="Screenshot" width="800px">
  </a>
</p>

## Ways to Begin

### 1. Express Deploy

Deploy this template to Heroku

[![Deploy](https://img.shields.io/badge/Deploy_to-Heroku-7056bf.svg?style=for-the-badge&logo=heroku)](https://heroku.com/deploy?template=https://github.com/open-template-hub/admin-ui-template)

### 2. Start with UI Generator

Create your UI with UI Generator Package

[![NPM](https://img.shields.io/badge/NPM-ui_generator-cb3837.svg?style=for-the-badge&logo=npm)](https://www.npmjs.com/package/@open-template-hub/app-generator)

### 3. GitHub Template

Use this repository as a Template

[![GitHubTemplate](https://img.shields.io/badge/GitHub-Template-24292e.svg?style=for-the-badge&logo=github)](https://github.com/open-template-hub/admin-ui-template/generate)

## Installations

Install **nodejs** and **npm** via **[nodejs.org](https://nodejs.org)**.

Check installed versions of **nodejs** and **npm** via running following commands:

```
node -v
npm -v
```

## WebStorm Configurations

If you imported project into **WebStorm** you will see following run configurations:

### 1. Install

**[install.run.xml](.run/install.run.xml)**

### 2. Build

**[buildLocal.run.xml](.run/buildLocal.run.xml)**

**[buildLocalToStagingApi.run.xml](.run/buildLocalToStagingApi.run.xml)**

**[buildStaging.run.xml](.run/buildStaging.run.xml)**

**[buildProd.run.xml](.run/buildProd.run.xml)**

### 3. Start

**[startLocal.run.xml](.run/startLocal.run.xml)**

**[startLocalFromIPhone.run.xml](.run/startLocalFromIPhone.run.xml)**

**[startLocalToStagingApi.run.xml](.run/startLocalToStagingApi.run.xml)**

**[startLocalFromIPhoneToStagingApi.run.xml](.run/startLocalFromIPhoneToStagingApi.run.xml)**

**[startStaging.run.xml](.run/startStaging.run.xml)**

**[start.run.xml](.run/start.run.xml)**

### 4. Debug

**[debug.run.xml](.run/debug.run.xml)**

### 5. Dependency Management

**[outdated.run.xml](.run/outdated.run.xml)**

**[update.run.xml](.run/update.run.xml)**

<br/>

## Local Deployment and Debug

In order to deploy and debug locally, run following configurations in order:

1. **[install.run.xml](.run/install.run.xml)**
2. **[buildLocal.run.xml](.run/buildLocal.run.xml)**
3. **startLocal**
    1. **[startLocal.run.xml](.run/startLocal.run.xml) (uses local api)**
    2. **[startLocalFromIPhone.run.xml](.run/startLocalFromIPhone.run.xml) (uses local api - accessible from iphone)**
    3. **[startLocalToStagingApi.run.xml](.run/startLocalToStagingApi.run.xml) (uses staging api)**
    4. **[startLocalFromIPhoneToStagingApi.run.xml](.run/startLocalFromIPhoneToStagingApi.run.xml) (uses staging api - accessible from iphone)**
4. **[debug.run.xml](.run/debug.run.xml)**

<br/>

## Environment Variables

If you run **WebStorm**'s **[env.run.xml](.run/env.run.xml)** configuration you will see following variables generated in **.env** file. Set them appropriately.

```applescript
PORT=4202
```

<br/>

Check project's current **nodejs** and **npm** version from **[package.json](package.json)**.

## Brand Color Scale Generator

To be able to generate brand color scales, we are using **[Colllor](http://colllor.com)**.

<br/>

## Favicon Generation

To be able to generate favicon, refer to **[FAVICON_GENERATION.md](docs/FAVICON_GENERATION.md)** file.

<br/>

## Cookie Policy Generation

To be able to generate cookie policy, use **[cookiepolicygenerator](https://www.cookiepolicygenerator.com)** site.

<br/>

## Localization

To be able to generate or update localization, use [updateMessages.run.xml](.run/updateMessages.run.xml).

<br/>

## Outdated

Refer to **[OUTDATED.md](docs/OUTDATED.md)** to see outdated npm packages and update them with your own risk.

<br/>

## Contributors

<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
<!-- prettier-ignore-start -->
<!-- markdownlint-disable -->
<table>
  <tr>
    <td align="center"><a href="https://github.com/furknyavuz"><img src="https://avatars0.githubusercontent.com/u/2248168?s=460&u=435ef6ade0785a7a135ce56cae751fb3ade1d126&v=4" width="100px;" alt=""/><br /><sub><b>Furkan Yavuz</b></sub></a><br /><a href="https://github.com/open-template-hub/admin-ui-template/issues/created_by/furknyavuz" title="Answering Questions">💬</a> <a href="https://github.com/open-template-hub/admin-ui-template/commits?author=furknyavuz" title="Documentation">📖</a> <a href="https://github.com/open-template-hub/admin-ui-template/pulls?q=is%3Apr+reviewed-by%3Afurknyavuz" title="Reviewed Pull Requests">👀</a></td>
    <td align="center"><a href="https://github.com/fatihturker"><img src="https://avatars1.githubusercontent.com/u/2202179?s=460&u=261b1129e7106c067783cb022ab9999aad833bdc&v=4" width="100px;" alt=""/><br /><sub><b>Fatih Turker</b></sub></a><br /><a href="https://github.com/open-template-hub/admin-ui-template/issues/created_by/fatihturker" title="Answering Questions">💬</a> <a href="https://github.com/open-template-hub/admin-ui-template/commits?author=fatihturker" title="Documentation">📖</a> <a href="https://github.com/open-template-hub/admin-ui-template/pulls?q=is%3Apr+reviewed-by%3Afatihturker" title="Reviewed Pull Requests">👀</a></td>
    <td align="center"><a href="https://github.com/mertlsarac"><img src="https://avatars1.githubusercontent.com/u/38442589?s=400&u=aa3cda11724fc297a0bfa6beb35c9be81687cf3c&v=4" width="100px;" alt=""/><br /><sub><b>Mert Sarac</b></sub></a><br /><a href="https://github.com/open-template-hub/admin-ui-template/issues/created_by/mertlsarac" title="Answering Questions">💬</a> <a href="https://github.com/open-template-hub/admin-ui-template/commits?author=mertlsarac" title="Documentation">📖</a> <a href="https://github.com/open-template-hub/admin-ui-template/pulls?q=is%3Apr+reviewed-by%3Amertlsarac" title="Reviewed Pull Requests">👀</a></td>
  </tr>
</table>

<!-- markdownlint-enable -->
<!-- prettier-ignore-end -->
<!-- ALL-CONTRIBUTORS-LIST:END -->

## Contributing

Refer to **[CONTRIBUTING.md](https://github.com/open-template-hub/.github/blob/master/docs/CONTRIBUTING.md)** to see how to contribute to Open Template Hub.

<br/>

## Code of Conduct

Refer to **[CODE_OF_CONDUCT.md](https://github.com/open-template-hub/.github/blob/master/docs/CODE_OF_CONDUCT.md)** to see contributor covenant code of conduct.

<br/>

## LICENSE

The source code for this project is released under the [MIT License](LICENSE).


<table align="right"><tr><td><a href="https://opentemplatehub.com"><img src="https://raw.githubusercontent.com/open-template-hub/open-template-hub.github.io/master/assets/logo/brand-logo.png" width="50px" alt="oth"/></a></td><td><b>Open Template Hub © 2023</b></td></tr></table>

Report a correction

Explore similar templates

Compare previews and descriptions within the same stack and category.

ngx-admin

ngx-admin is an Angular admin dashboard template maintained by Akveo, built on the Nebular component library and released under the MIT license.

Angular · Admin dashboard

material-angular-dashboard

A dark-themed Angular admin template following Google Material Design, with dashboard pages, D3/NVD3 charts, ag-Grid tables, and a Sass/BEM theme. Released under the MIT license, it offers starter-kit, feature/backend, and feature/serverless branches.

Angular · Admin dashboard

ng-devui-admin

A customizable mid-to-back-office admin template built with Angular and DevUI, featuring configurable layouts, multi-theme switching, internationalization, and local mock data debugging.

Angular · Admin dashboard

angular-material-template

A responsive Angular Material admin template with authentication, sidebar dashboard, account area, role guards, JWT interceptor, and lazy-loaded modules, under the MIT license.

Angular · Admin dashboard

lightning-admin-angular

A mobile-first responsive admin template built with Angular and Bootstrap, offering data interface layouts such as dashboards.

Angular · Admin dashboard

StarAdmin-Free-Angular-Admin-Template

A free admin template based on Angular 7 and Bootstrap 4, maintained by BootstrapDash.

Angular · Admin dashboard