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 includesNode.js® and annpm package manager.
Node.js
Angular 20 requiresNode.js LTS version^20.19,^22.12 or^24.0.
- To check your version, run
node -vin a terminal/console window. - To get
Node.js, go tonodejs.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.5 for Angular 20 supportsng add to install all required dependencies for your Angular project.
ng add @coreui/angular
Npm
Your other option is to usenpm 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 version4.4.x CoreUI Angular components are marked asstandalone: 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 importBrowserAnimationsModule orprovideAnimationsAsync
- with NgModules:
// app.module.tsimport { BrowserAnimationsModule } from '@angular/platform-browser/animations';...@NgModule({ imports: [ BrowserAnimationsModule, ...
- with Standalone Components:
// main.tsimport { 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 eitherapp.module,app.config, orapp.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'