Get Started
## Installation --- #### Prerequisites Before you begin, make sure your development environment includes `Node.js®` and an `npm` package manager. ###### Node.js Angular 21 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](https://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.```bashnpm install -g @angular/cli```
See also:Angular setup --- #### Angular CLI CoreUI v5.6 for Angular 21 supports `ng add` to install all required dependencies for your Angular project. ```bash ng add @coreui/angular ```
--- #### Npm Your other option is to use `npm install` directly. ```bash npm install @coreui/angular @coreui/coreui @coreui/icons-angular ```
--- ## Using components ```ts 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: ```ts // app.module.ts import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; ... @NgModule({ imports: [ BrowserAnimationsModule, ... ```- with Standalone Components: ```ts // main.ts import { provideAnimationsAsync } from '@angular/platform-browser/animations/async'; bootstrapApplication(AppComponent, { providers: [ provideAnimationsAsync(), ... ] }) ```---## ProvidersTo 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`.```ts...importProvidersFrom(SidebarModule, DropdownModule)...```
## StylesheetsAngular 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```bashnpm install @coreui/coreui```
###### Basic usage```scss@import "@coreui/coreui/scss/coreui";```
See also:Customize CoreUI CSS --- ### Bootstrap CSS files ###### Installation (optional)```bashnpm install bootstrap```
###### Basic usage```jsimport 'bootstrap/dist/css/bootstrap.min.css'```