On this page

Get Started

CoreUI for Angular is a UI Component library written in TypeScript, and ready for your next Angular project. Learn how to include CoreUI Angular Components in your project.

Installation

Prerequisites

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

Node.js

Angular 20 requires Node.js LTS version ^20.19, ^22.12 or ^24.0.

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

Angular CLI

The Angular CLI is a command-line interface tool that allows you to scaffold, develop, test, deploy, and maintain Angular applications directly from a command shell.

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

npm install -g @angular/cli

Angular CLI

CoreUI v5.5 for Angular 20 supports ng add to install all required dependencies for your Angular project.

ng add @coreui/angular

Npm

Your other option is to use npm install directly.

npm install @coreui/angular @coreui/coreui @coreui/icons-angular

Using components

import { AlertModule } from '@coreui/angular';

@NgModule({
  imports: [AlertModule,]
  })
export class AppModule(){}

Standalone components

Starting from version 4.4.x CoreUI Angular components are marked as standalone: true.

Animations

Following CoreUI Angular components use @angular/animations module for animations.

Component
Alert
Carousel
Collapse
Loading Button
Modal
Offcanvas
SidebarNav
Toast

To make it work, you have to import BrowserAnimationsModule or provideAnimationsAsync

with NgModules:

// app.module.ts
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
...

@NgModule({
  imports: [
  BrowserAnimationsModule,
  ...

with Standalone Components:

// main.ts
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';

bootstrapApplication(AppComponent, {
  providers: [
    provideAnimationsAsync(),
    ...
  ]
})

Providers

To ensure that the Sidebar and Dropdown functions correctly, you might need to import the required providers. Depending on the configuration of your project, this should be done in either app.module, app.config, or app.routes.

...
importProvidersFrom(SidebarModule, DropdownModule)
...

Stylesheets

Angular components are styled using @coreui/coreui CSS library, but you can use them also with bootstrap CSS library. That is possible because @coreui/coreui library is compatible with bootstrap, it just extends its functionalities. The only exception is custom CoreUI components, which don't exist in the Bootstrap ecosystem.

CoreUI CSS files

Installation

npm install @coreui/coreui

Basic usage

@import "@coreui/coreui/scss/coreui";

Bootstrap CSS files

Installation (optional)

npm install bootstrap

Basic usage

import 'bootstrap/dist/css/bootstrap.min.css'