New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →

@clr/angular

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@clr/angular

Angular components for Clarity

17.6.0
latest
Source
npm

Version published: 5 days ago

Weekly downloads: 38K; decreased by-7.3%

Maintainers: 4

Weekly downloads

Created: 7 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 24 Jan 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

Opengrep Emerges as Open Source Alternative Amid Semgrep Licensing Controversy

Node.js EOL Versions CVE Dubbed the "Worst CVE of the Year" by Security Experts