discover · compare · collections · requirements · contribute · feed · watching · stats · help with your tokens

vmware-archive/clarity · source

Snapshot 0 · 2026-11-04T12:47:24Z · TypeScript · MIT

GitHub description at capture

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

README at capture

NOTE: The Clarity Design System has moved and is now split into two repositories, one for [Clarity Angular](https://github.com/vmware-clarity/ng-clarity) and one for [Clarity Core](https://github.com/vmware-clarity/core). This repository is now for archived purposes only.

![Clarity](logo.png)

# Clarity Design System

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

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).

If you are looking for Clarity Angular, our previous implementation of Clarity built
in Angular, please see the [`angular` branch](https://github.com/vmware/clarity/tree/angular/) for the latest version there.

## Getting Started

Clarity is published as five npm packages:

- [![npm version core](https://img.shields.io/npm/v/@cds/core/latest?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/latest?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/latest?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

For documentation on the Clarity Design System, including a list of components
and example usage, see [our website](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/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/discussions).