What it does
Clarity Angular is an open-source design system implemented through Angular components and static CSS styles. Its official repository links component examples, documentation and version-specific reproduction templates.
Clarity Angular comes in two related packages. @clr/ui supplies static CSS, while @clr/angular supplies Angular components that depend on those styles. This makes the CSS-only and Angular adoption paths explicit.
For a static interface, install @clr/ui, include clr-ui.min.css and use Clarity’s class names and markup. For Angular components, install both packages and import ClarityModule into the application module. The repository also links StackBlitz templates by Clarity version, which are useful for reproducing a component issue in a matching setup.
The design-system code is free under MIT and public installation needs no account. Its font uses the separate Open Font License. Preview branches are available for unreleased changes, so choose a released npm version when you need a stable package baseline.
Strengths
- The installation guide separates static styles from Angular components.
- Version-specific StackBlitz templates support reproducible component examples.
Best for
- Angular teams using the Clarity design system
Sources
- vmware-clarity/ng-clarity (Oct 27, 2026)
- Installing the Clarity Design System (Oct 27, 2026)