Convert Figma logo to code with AI

coreui logocoreui-free-angular-admin-template

CoreUI Angular is free Angular 18 admin template based on Bootstrap 5

1,703
1,209
1,703
1
View on GitHubView on NPM

Top Related Projects

creativetimofficial's avatar

material-dashboard-angular2

1,004

Material Dashboard Angular

akveo's avatar

ngx-admin

25,185

Customizable admin dashboard template based on Angular 10+

tabler's avatar

tabler

37,939

Tabler is free and open-source HTML Dashboard UI Kit built on Bootstrap

ColorlibHQ's avatar

AdminLTE

43,907

AdminLTE - Free admin dashboard template based on Bootstrap 5

pratikborsadiya's avatar

vali-admin

1,539

Free Bootstrap 5 admin/dashboard template

Quick Overview

CoreUI Free Angular Admin Template is an open-source admin dashboard template based on Angular and Bootstrap. It provides a responsive and customizable interface for building modern web applications, featuring a wide range of UI components and pre-built pages suitable for various admin panel needs.

Pros

  • Extensive collection of pre-built UI components and pages
  • Responsive design that works well on various devices and screen sizes
  • Regular updates and active community support
  • Built on popular frameworks (Angular and Bootstrap) for easier adoption and customization

Cons

  • Learning curve for developers new to Angular or CoreUI
  • Limited advanced features compared to the paid Pro version
  • Some users report occasional bugs or compatibility issues with certain Angular versions
  • Documentation could be more comprehensive for complex use cases

Getting Started

  1. Clone the repository:
git clone https://github.com/coreui/coreui-free-angular-admin-template.git
  1. Navigate to the project directory:
cd coreui-free-angular-admin-template
  1. Install dependencies:
npm install
  1. Start the development server:
ng serve
  1. Open your browser and visit http://localhost:4200 to see the template in action.

To customize the template, you can modify the components in the src/app directory and adjust styles in the src/scss folder. Refer to the official documentation for more detailed instructions on customization and advanced usage.

Competitor Comparisons

creativetimofficial logo

material-dashboard-angular2

1,004

Material Dashboard Angular

Pros of Material Dashboard Angular2

  • Utilizes Material Design, providing a modern and sleek UI out-of-the-box
  • Includes more pre-built components and pages, reducing development time
  • Better documentation and examples for quick start and customization

Cons of Material Dashboard Angular2

  • Less flexible for custom styling compared to CoreUI's Bootstrap-based approach
  • Smaller community and fewer third-party extensions
  • Steeper learning curve for developers not familiar with Material Design

Code Comparison

Material Dashboard Angular2:

import { Component } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';

@Component({
  selector: 'app-table',
  template: '<mat-table [dataSource]="dataSource"></mat-table>'
})
export class TableComponent {
  dataSource = new MatTableDataSource<any>([]);
}

CoreUI Free Angular Admin Template:

import { Component } from '@angular/core';

@Component({
  selector: 'app-table',
  template: '<table class="table"><tbody></tbody></table>'
})
export class TableComponent {
  data: any[] = [];
}

The code comparison shows that Material Dashboard Angular2 uses Angular Material components, while CoreUI relies on Bootstrap classes for styling. This reflects the different approaches to UI design and component implementation between the two templates.

akveo logo

ngx-admin

25,185

Customizable admin dashboard template based on Angular 10+

Pros of ngx-admin

  • More comprehensive and feature-rich UI components
  • Better documentation and examples
  • Active community and frequent updates

Cons of ngx-admin

  • Steeper learning curve due to complexity
  • Potentially heavier and slower performance
  • May require more customization for specific use cases

Code Comparison

ngx-admin:

import { NbMenuItem } from '@nebular/theme';

export const MENU_ITEMS: NbMenuItem[] = [
  { title: 'Dashboard', icon: 'home-outline', link: '/pages/dashboard' },
  { title: 'IoT Dashboard', icon: 'activity-outline', link: '/pages/iot-dashboard' },
];

CoreUI Free Angular Admin Template:

export const navItems: INavData[] = [
  { name: 'Dashboard', url: '/dashboard', icon: 'icon-speedometer' },
  { title: true, name: 'Theme' },
  { name: 'Colors', url: '/theme/colors', icon: 'icon-drop' },
];

Both templates use similar approaches for defining menu items, but ngx-admin utilizes Nebular's NbMenuItem interface, while CoreUI uses a custom INavData interface. ngx-admin's approach may offer more built-in features and integration with the Nebular ecosystem.

tabler logo

tabler

37,939

Tabler is free and open-source HTML Dashboard UI Kit built on Bootstrap

Pros of Tabler

  • More lightweight and flexible, with a smaller footprint
  • Offers a wider range of UI components and design elements
  • Better documentation and examples for quick implementation

Cons of Tabler

  • Less focused on Angular-specific development
  • May require more customization for complex admin panel features
  • Fewer pre-built layouts and templates compared to CoreUI

Code Comparison

Tabler (HTML/CSS approach):

<div class="card">
  <div class="card-header">
    <h3 class="card-title">Sample Card</h3>
  </div>
  <div class="card-body">
    <p>Card content goes here</p>
  </div>
</div>

CoreUI (Angular component-based approach):

@Component({
  selector: 'app-sample-card',
  template: `
    <c-card>
      <c-card-header>
        <h3 cCardTitle>Sample Card</h3>
      </c-card-header>
      <c-card-body>
        <p>Card content goes here</p>
      </c-card-body>
    </c-card>
  `
})
export class SampleCardComponent { }

The code comparison highlights the different approaches: Tabler uses a more traditional HTML/CSS structure, while CoreUI leverages Angular's component-based architecture with custom elements and directives.

ColorlibHQ logo

AdminLTE

43,907

AdminLTE - Free admin dashboard template based on Bootstrap 5

Pros of AdminLTE

  • More comprehensive and feature-rich, offering a wider range of UI components and plugins
  • Better documentation and examples, making it easier for developers to implement and customize
  • Larger community and more frequent updates, ensuring better long-term support and bug fixes

Cons of AdminLTE

  • Not built specifically for Angular, requiring additional work to integrate with Angular projects
  • Heavier and potentially slower due to its reliance on jQuery and other external libraries
  • Less modular structure, which can make it more challenging to remove unwanted features

Code Comparison

AdminLTE (jQuery-based):

$(document).ready(function () {
  $('.sidebar-menu').tree();
  $('.daterange').daterangepicker();
  $('#example1').DataTable();
});

CoreUI (Angular-based):

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html'
})
export class DashboardComponent implements OnInit {
  ngOnInit(): void {
    // Angular-specific initialization
  }
}

The code comparison highlights the fundamental difference in approach between the two templates. AdminLTE relies on jQuery for DOM manipulation and plugin initialization, while CoreUI uses Angular's component-based architecture for a more modern and maintainable codebase.

pratikborsadiya logo

vali-admin

1,539

Free Bootstrap 5 admin/dashboard template

Pros of Vali Admin

  • Lightweight and simple design, making it easier to customize and integrate
  • Built with Bootstrap 4, offering a familiar framework for many developers
  • Includes a variety of pre-built pages and components out of the box

Cons of Vali Admin

  • Less frequent updates compared to CoreUI Free Angular Admin Template
  • Fewer advanced features and integrations
  • Limited Angular-specific optimizations

Code Comparison

Vali Admin (jQuery-based):

$('.app-menu').on('click', 'a', function(e) {
  var $this = $(this);
  var checkElement = $this.next();
  if (checkElement.is('.treeview-menu') && checkElement.is(':visible')) {
    checkElement.slideUp(animationSpeed, function() {
      checkElement.removeClass('menu-open');
    });
    checkElement.parent("li").removeClass("is-expanded");
  }
  // ... (more code)
});

CoreUI Free Angular Admin Template:

@Component({
  selector: 'app-dashboard',
  templateUrl: './default-layout.component.html'
})
export class DefaultLayoutComponent implements OnInit {
  public navItems = navItems;
  public perfectScrollbarConfig = {
    suppressScrollX: true,
  };
  constructor() { }
  ngOnInit(): void { }
}

The code snippets highlight the difference in approach, with Vali Admin using jQuery for DOM manipulation, while CoreUI leverages Angular's component-based architecture for a more modern and maintainable codebase.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

@coreui angular npm-coreui-angular npm-coreui-angular NPM downloads
@coreui coreui npm package NPM downloads
angular

CoreUI Free Admin Dashboard Template for Angular 18

CoreUI is meant to be the UX game changer. Pure & transparent code is devoid of redundant components, so the app is light enough to offer ultimate user experience. This means mobile devices also, where the navigation is just as easy and intuitive as on a desktop or laptop. The CoreUI Layout API lets you customize your project for almost any device – be it Mobile, Web or WebApp – CoreUI covers them all!

Table of Contents

Versions

CoreUI Pro

CoreUI PRO Angular Admin Templates

Default ThemeLight Theme
CoreUI PRO Angular Admin TemplateCoreUI PRO Angular Admin Template
Modern ThemeBright Theme
CoreUI PRO Angular Admin TemplateCoreUI PRO React Admin Template

Quick Start

Prerequisites

Before you begin, make sure your development environment includes Node.js® and an npm package manager.

Node.js

Angular 18 requires Node.js LTS version ^18.19 or ^20.11.

  • To check your version, run node -v in a terminal/console window.
  • To get Node.js, go to nodejs.org.
Angular CLI

Install the Angular CLI globally using a terminal/console window.

npm install -g @angular/cli

Installation

$ npm install
$ npm update

Basic usage

# dev server with hot reload at http://localhost:4200
$ npm start

Navigate to http://localhost:4200. The app will automatically reload if you change any of the source files.

Build

Run build to build the project. The build artifacts will be stored in the dist/ directory.

# build for production with minification
$ npm run build

What's included

Within the download you'll find the following directories and files, logically grouping common assets and providing both compiled and minified variations. You'll see something like this:

coreui-free-angular-admin-template
├── src/                         # project root
│   ├── app/                     # main app directory
|   │   ├── icons/               # icons set for the app
|   │   ├── layout/              # layout 
|   |   │   └── default-layout/  # layout components
|   |   |       └── _nav.js      # sidebar navigation config
|   │   └── views/               # application views
│   ├── assets/                  # images, icons, etc.
│   ├── components/              # components for demo only
│   ├── scss/                    # scss styles
│   └── index.html               # html template
│
├── angular.json
├── README.md
└── package.json

Documentation

The documentation for the CoreUI Admin Template is hosted at our website CoreUI for Angular

This project was generated with Angular CLI version 18.0.0.

Versioning

For transparency into our release cycle and in striving to maintain backward compatibility, CoreUI Free Admin Template is maintained under the Semantic Versioning guidelines.

See the Releases section of our project for changelogs for each release version.

Development server

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

Code scaffolding

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

Build

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

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.

Creators

Łukasz Holeczek

CoreUI team

Community

Get updates on CoreUI's development and chat with the project maintainers and community members.

Support CoreUI Development

CoreUI is an MIT-licensed open source project and is completely free to use. However, the amount of effort needed to maintain and develop new features for the project is not sustainable without proper financial backing. You can support development by buying the CoreUI PRO or by becoming a sponsor via Open Collective.

Platinum Sponsors

Support this project by becoming a Platinum Sponsor. A large company logo will be added here with a link to your website.

Gold Sponsors

Support this project by becoming a Gold Sponsor. A big company logo will be added here with a link to your website.

Silver Sponsors

Support this project by becoming a Silver Sponsor. A medium company logo will be added here with a link to your website.

Bronze Sponsors

Support this project by becoming a Bronze Sponsor. The company avatar will show up here with a link to your OpenCollective Profile.

Backers

Thanks to all the backers and sponsors! Support this project by becoming a backer.

Copyright and License

copyright 2024 creativeLabs Łukasz Holeczek.

Code released under the MIT license. There is only one limitation you can't re-distribute the CoreUI as stock. You can’t do this if you modify the CoreUI. In the past, we faced some problems with persons who tried to sell CoreUI based templates.

NPM DownloadsLast 30 Days