@clr/angular

Angular components for Clarity

17.10.0

latest

Source

npm

Version published: 4 weeks ago

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 20 May 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