Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/vmware-clarity/core

Clarity is a scalable, accessible, customizable, open-source design system built with web components. Works with any JavaScript framework, created for enterprises, and designed to be inclusive.
https://github.com/vmware-clarity/core

a11y angular clarity design-system javascript react ui-components vue web-components

Last synced: about 2 months ago
JSON representation

Clarity is a scalable, accessible, customizable, open-source design system built with web components. Works with any JavaScript framework, created for enterprises, and designed to be inclusive.

Awesome Lists containing this project

README 

        
![Clarity](logo.png)



# Clarity Core



![Build](https://github.com/vmware-clarity/core/workflows/Build/badge.svg)

[![npm version core](https://img.shields.io/npm/v/@cds/core/next?label=%40cds%2Fcore&style=flat-square)](https://www.npmjs.com/package/@cds/core)

[![npm version cds react](https://img.shields.io/npm/v/@cds/angular/next?label=%40cds%2Freact&style=flat-square)](https://www.npmjs.com/package/@cds/react)

[![npm version cds angular](https://img.shields.io/npm/v/@cds/angular/next?label=%40cds%2Fangular&style=flat-square)](https://www.npmjs.com/package/@cds/angular)

[![npm version clarity city](https://img.shields.io/npm/v/@cds/city/latest?label=%40cds%2Fcity&style=flat-square)](https://www.npmjs.com/package/@cds/city)



Clarity is an open source design system that brings together UX

guidelines, design resources, and coding implementations with Web Components. This

repository includes everything you need to build, customize, test, and deploy

Clarity. For complete documentation, visit the [Clarity website](https://clarity.design).



## Getting Started



Clarity is published as five npm packages:



- [![npm version core](https://img.shields.io/npm/v/@cds/core/next?label=%40cds%2Fcore&style=flat-square)](https://www.npmjs.com/package/@cds/core) Contains the Web

  Components that work in any JavaScript framework.

- [![npm version cds angular](https://img.shields.io/npm/v/@cds/angular/next?label=%40cds%2Fangular&style=flat-square)](https://www.npmjs.com/package/@cds/angular) Contains shims for core usage in Angular environment

- [![npm version cds react](https://img.shields.io/npm/v/@cds/angular/next?label=%40cds%2Freact&style=flat-square)](https://www.npmjs.com/package/@cds/react) Contains shims for core usage in React environment

- [![npm version clarity city](https://img.shields.io/npm/v/@cds/city/latest?label=%40cds%2Fcity&style=flat-square)](https://www.npmjs.com/package/@cds/city) Our open source sans-serif typeface.



## Installing Clarity



Visit our documentation at https://clarity.design/get-started/



## Documentation



- [API Documentation](https://clarity.design/storybook/core)

- [Usage Guidelines](https://clarity.design)



## Contributing



The Clarity project team welcomes contributions from the community. For more

detailed information, see [our contribution guidances](./docs/CONTRIBUTING.md).



## Licenses



- The Clarity Design System is licensed under the [MIT license](./LICENSE).



## Feedback



If you find a bug or want to request a new feature, please open a [GitHub issue](https://github.com/vmware-clarity/core/issues).



Include a link to the reproduction scenario you created by forking one of the

Clarity Stackblitz Templates for the version you are using at

[Clarity StackBlitz templates](https://stackblitz.com/@clr-team/)..



## Support



For our support policies please visit https://clarity.design/get-started/support/



For questions, ideas, or just reaching out to the team feel free to open a discussion in our [GitHub Disscussion section](https://github.com/vmware-clarity/core/discussions).