# @clr/angular > Angular components for Clarity Latest version **18.3.0** (published 2026-08-28) · MIT license · 25.8K weekly downloads ## Install ```sh npm install @clr/angular pnpm add @clr/angular yarn add @clr/angular bun add @clr/angular ``` ## Health **Score 75/100 (B)** — status: active. Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score. ## Facts | | | |---|---| | Version | 18.3.0 | | Published | 2026-08-28 | | First published | 2017-12-15 | | Weekly downloads | 25.8K | | License | MIT | | TypeScript types | bundled | | Module format | ESM | | Dependencies | 1 | | Unpacked size | 6.7 MB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 430 | | Author | Clarity Design System | | Maintainers | jinnie, clarity-service-account, valentin-mladenov, danieltsanev | | Keywords | ng-add, clarity, angular, components | ## Links - npm: https://www.npmjs.com/package/@clr/angular - Repository: https://github.com/vmware-clarity/ng-clarity - Homepage: https://clarity.design - Issues: https://github.com/vmware-clarity/ng-clarity/issues - npm.io page: https://npm.io/package/@clr/angular ## Dependencies (1) - [tslib](https://npm.io/package/tslib.md) ^2.3.0 ## Recent versions - 18.3.0 (latest) — 2026-08-28 - 18.2.2 (release-18.2.x) — 2026-08-11 - 18.0.0-beta.12 (beta) — 2026-05-05 - 17.13.0 (release-17.x) — 2026-04-14 - 15.14.8 (release-15.x) — 2025-01-09 - 16.6.0 (release-16.x) — 2024-11-25 - 17.0.0-next.2 (next) — 2024-02-09 - 13.18.3 (release-13.x) — 2023-11-08 - 12.4.4 (release-12.x) — 2023-04-04 - 15.0.0-rc.2 (rc) — 2023-02-13 - 5.5.3 (v5-lts) — 2022-01-24 - 4.0.15 (v4-lts) — 2021-05-06 - 3.1.15 (v3-lts) — 2021-01-07 - 2.4.11 (v2-lts) — 2021-01-07 - 1.3.9 (v1-lts) — 2020-06-17 - … 389 more at https://npm.io/package/@clr/angular/versions ## README ## Installing Clarity Angular [![npm version](https://badge.fury.io/js/%40clr%2Fangular.svg)](https://badge.fury.io/js/%40clr%2Fangular) 1. Install Clarity packages through npm: ``` npm install @clr/ui @clr/angular ``` 2. Import the ClarityModule into your Angular application's module. Your application's main module might look like this: ``` import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { ClarityModule } from '@clr/angular'; import { AppComponent } from './app.component'; @NgModule({ imports: [ BrowserModule, ClarityModule, .... ], declarations: [ AppComponent ], bootstrap: [ AppComponent ] }) export class AppModule { } ``` 3. Include the necessary styles in the build. You can do this by either including the compiled/minified css in your angular.json file or by importing the scss/css directly in your top level styles.scss/css file. ``` //... "styles": [ "node_modules/@clr/ui/clr-ui.min.css", //... any other styles ] //... ``` ```scss @use '@clr/ui/clr-ui.min.css'; ``` **Note**: The above instructions represent the best practice for Clarity Design System. For information about accommodating legacy themes, see the Legacy Styles section in the @clr/ui package. 4. Set the Theme Add the `cds-theme=”light”` attribute to the body element in your main HTML file: ``` ``` You can toggle to dark theme by setting cds-theme="dark". --- _Source: https://npm.io/package/@clr/angular · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._