Angular Components Library

Components Library

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 22 requires Node.js LTS version ^22.22.3, ^24.15.0 or ^26.0.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

See also: Angular setup

Angular CLI

CoreUI v5.7 for Angular 22 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

Since version 5.7.25 no CoreUI Angular component uses the @angular/animations module — every animation runs on CSS transitions. You no longer need BrowserAnimationsModule or provideAnimationsAsync() for our components, and @angular/animations can be dropped from your dependencies unless your own code uses it.

Componentretired from
SidebarNav5.7.25
Alert5.7.15
Carousel5.7.15
Collapse5.7.15
Loading Button5.7.15
Modal5.7.15
Offcanvas5.7.15
Toast5.7.4

On earlier versions the components listed above needed the animations provider, imported as BrowserAnimationsModule with NgModules or provideAnimationsAsync() with standalone components.

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";

See also: Customize CoreUI CSS

Bootstrap CSS files

Installation (optional)
npm install bootstrap
Basic usage
import 'bootstrap/dist/css/bootstrap.min.css'