@clr/angular

Package Overview

Dependencies

Maintainers

Versions

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@clr/angular

Angular components for Clarity

latest

Source

npm

Version: 17.11.5

Version published: last week

Weekly downloads: 19K

Maintainers: 4

Weekly downloads

Created: 8 years ago

Source

Installing Clarity Angular

Install Clarity packages through npm:

npm install @clr/ui @clr/angular @cds/core

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 {    }

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/@cds/core/global.min.css",
    "node_modules/@cds/core/styles/theme.dark.min.css",
    "node_modules/@clr/ui/clr-ui.min.css",
    //... any other styles
  ]
  //...

@use '@cds/core/global.min.css';
@use '@cds/core/styles/theme.dark.min.css';
@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.

Set the Theme Add the cds-theme=”light” attribute to the body element in your main HTML file:

<body cds-theme="light" />

You can toggle to dark theme by setting cds-theme="dark".

Keywords

FAQs

What is @clr/angular?

Is @clr/angular popular?

Is @clr/angular well maintained?

Package last updated on 05 Sep 2025

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

@clr/angular

Keywords

Related posts

Introducing Custom Pull Request Alert Comment Headers

Rust Support Now in Beta