PHPackages vmw/clarity - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. vmw/clarity ActiveLibrary vmw/clarity =========== Clarity Design System: UX guidelines, HTML/CSS framework, and Angular 2 components working together to craft exceptional experiences. 09TypeScript Since Jan 27Pushed 9y agoCompare [ Source](https://github.com/scrothers/clarity)[ Packagist](https://packagist.org/packages/vmw/clarity)[ RSS](/packages/vmw-clarity/feed)WikiDiscussions master Synced 2mo ago READMEChangelogDependenciesVersions (1)Used By (0) [![Clarity](logo.png)](logo.png) Clarity Design System ===================== [](#clarity-design-system) [![Build Status](https://camo.githubusercontent.com/db00024ffc7f56d74fb3d456e076fe5e044e4c201571495f14244c804852cb45/68747470733a2f2f7472617669732d63692e6f72672f766d776172652f636c61726974792e7376673f6272616e63683d6d6173746572)](https://travis-ci.org/vmware/clarity) Project Clarity is an open source design system that brings together UX guidelines, an HTML/CSS framework, and Angular 2 components. This repository includes everything you need to build, customize, test, and deploy Clarity. For complete documentation, visit the [Clarity website](https://vmware.github.io/clarity/). Getting Started --------------- [](#getting-started) Clarity is published as three npm packages: - **clarity-icons.** Contains the custom element icons. - **clarity-ui.** Contains the static styles for building HTML components. - **clarity-angular.** Contains the Angular 2 components. This package depends on clarity-ui for styles. The easiest way to run a sample Angular 2 application with Clarity is to use the [Clarity Seed](https://github.com/vmware/clarity-seed). If you already have an Angular 2 application, you can follow the installation steps below to include and use Clarity in your application. ### Installing Clarity Icons [](#installing-clarity-icons) 1. Install Clarity Icons package through npm: ``` npm install clarity-icons --save ``` 2. Install the polyfill for Custom Elements: ``` npm install @webcomponents/custom-elements@1.0.0-alpha.3 --save ``` 3. (Optional) If your application supports IE10, the polyfill will require the MutationObserver shim to work. If your application doesn't support IE10, you can skip the following installation: ``` npm install mutationobserver-shim@0.3.2 --save ``` 4. Include the clarity-icons.min.css and clarity-icons.min.js in your HTML. As custom-elements.min.js is dependent on the Custom Elements polyfill, make sure to include it before clarity-icons.min.js. Also, if your app needs to support IE10, include the mutationobserver.min.js before the polyfill: ``` ``` If your site is built with [angular-cli](https://github.com/angular/angular-cli) you can achieve the above by adding the files to the styles array and scripts array in `angular-cli.json`: ``` "styles": [ ... "../node_modules/clarity-icons/clarity-icons.min.css", ... ], "scripts": [ ... "../node_modules/mutationobserver-shim/dist/mutationobserver.min.js", "../node_modules/@webcomponents/custom-elements/custom-elements.min.js", "../node_modules/clarity-icons/clarity-icons.min.js" ... ] ``` ### Installing Clarity UI [](#installing-clarity-ui) 1. Install Clarity UI package through npm: ``` npm install clarity-ui --save ``` 2. Include the clarity-ui.min.css in your HTML file: ``` ``` If your site is built with [angular-cli](https://github.com/angular/angular-cli), you can achieve the above by adding the file to the styles array in `angular-cli.json`: ``` "styles": [ ... "../node_modules/clarity-ui/clarity-ui.min.css" ... ] ``` 3. Write your HTML with the Clarity CSS class names and markup. ### Installing Clarity Angular [](#installing-clarity-angular) 1. Follow steps above to install Clarity Icons and Clarity UI. 2. Install the clarity-angular package through npm: ``` npm install clarity-angular --save ``` 3. Import the ClarityModule into your Angular 2 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 'clarity-angular'; import { AppComponent } from './app.component'; @NgModule({ imports: [ BrowserModule, ClarityModule.forRoot(), .... ], declarations: [ AppComponent ], bootstrap: [ AppComponent ] }) export class AppModule { } ``` If your application uses [systemjs](https://github.com/systemjs/systemjs), add the clarity-angular configurations as in the example below. If your application already has packages setting for `rxjs` but doesn't have the `main`file, add it in. ``` System.config({ ... map: { ... 'clarity-angular': 'node_modules/clarity-angular/clarity-angular.umd.js', }, packages: { ... 'rxjs' : { main: 'Rx.js', defaultExtension: 'js' }, } ... }); ``` Documentation ------------- [](#documentation) For documentation on the Clarity Design System, including a list of components and example usage, see [our website](https://vmware.github.io/clarity). Contributing ------------ [](#contributing) The Clarity project team welcomes contributions from the community. For more detailed information, see [CONTRIBUTING.md](CONTRIBUTING.md). Licenses -------- [](#licenses) - The Clarity Design System is licensed under the MIT license. - The font is licensed under the Open Font License (OFL). Feedback -------- [](#feedback) If you find a bug or want to request a new feature, please open a [GitHub issue](https://github.com/vmware/clarity/issues). If possible please provide a minimal demo illustrating the issue by forking one of the Clarity Plunker Templates - Clarity Version: [Latest](https://plnkr.co/8TwwdL) - Clarity Version: [0.7.6](https://plnkr.co/iWrQNL) ### Health Score 21 — LowBetter than 19% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity4 Limited adoption so far Community16 Small or concentrated contributor base Maturity41 Maturing project, gaining track record Bus Factor3 3 contributors hold 50%+ of commits How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Community Maintainers ![](https://www.gravatar.com/avatar/bfc3f2a76c45c2cd893bcc5e71ec36595415ed4c9350cba844ec71e558b1425f?d=identicon)[crothers](/maintainers/crothers) --- Top Contributors [![jeeyun](https://avatars.githubusercontent.com/u/1827742?v=4)](https://github.com/jeeyun "jeeyun (26 commits)")[![Shijir](https://avatars.githubusercontent.com/u/3958008?v=4)](https://github.com/Shijir "Shijir (22 commits)")[![youdz](https://avatars.githubusercontent.com/u/4647197?v=4)](https://github.com/youdz "youdz (17 commits)")[![hippee-lee](https://avatars.githubusercontent.com/u/433692?v=4)](https://github.com/hippee-lee "hippee-lee (16 commits)")[![mathisscott](https://avatars.githubusercontent.com/u/2728359?v=4)](https://github.com/mathisscott "mathisscott (15 commits)")[![adibwoy](https://avatars.githubusercontent.com/u/1426805?v=4)](https://github.com/adibwoy "adibwoy (13 commits)")[![kaelig](https://avatars.githubusercontent.com/u/85783?v=4)](https://github.com/kaelig "kaelig (1 commits)")[![katallaxie](https://avatars.githubusercontent.com/u/570959?v=4)](https://github.com/katallaxie "katallaxie (1 commits)")[![jaffoneh](https://avatars.githubusercontent.com/u/690949?v=4)](https://github.com/jaffoneh "jaffoneh (1 commits)")[![PatrickJS](https://avatars.githubusercontent.com/u/1016365?v=4)](https://github.com/PatrickJS "PatrickJS (1 commits)")[![Robertmw](https://avatars.githubusercontent.com/u/7315642?v=4)](https://github.com/Robertmw "Robertmw (1 commits)")[![ioanungurean](https://avatars.githubusercontent.com/u/11721719?v=4)](https://github.com/ioanungurean "ioanungurean (1 commits)")[![travisfinch](https://avatars.githubusercontent.com/u/505983?v=4)](https://github.com/travisfinch "travisfinch (1 commits)")[![gachappell](https://avatars.githubusercontent.com/u/23195946?v=4)](https://github.com/gachappell "gachappell (1 commits)") ### Embed Badge ![Health badge](/badges/vmw-clarity/health.svg) ``` [![Health](https://phpackages.com/badges/vmw-clarity/health.svg)](https://phpackages.com/packages/vmw-clarity) ``` PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)