Skip to content
SPECIFICTION
Get listed

Clarity Design System

clarity.design

Free plan Web
Visit clarity.design
Spec score 7.8 #11 of 26 in UI Kit Libraries

What it is

Clarity Design System is a free, open-source toolkit for enterprise-focused interface design, with inclusion at its center. It combines design assets—including Figma themes, icons, color libraries, fonts and downloadable SVG icons—with more than 30 components and over 200 icons. Clarity Core provides reusable Web Components for Angular, React, Vue, other JavaScript frameworks, or projects without a framework. It is compatible with Webpack, RollupJS, Parcel and most framework CLIs. React projects need the additional @cds/react wrapper because React does not fully interoperate with custom elements. The datagrid supports more than a dozen features and thousands of data entries. Clarity follows WCAG 2.1 AA guidelines and has a dedicated accessibility team; accessibility checks cover multiple tools, screen readers and browser combinations. The code is licensed under MIT. Community questions go through GitHub Discussions, while issues and feature requests are tracked in GitHub Issues. Each major release is actively supported for six months after the next major release becomes available. Clarity Core currently requires a JavaScript bundler to import its dependencies.

Spec sheet

Purpose
Clarity is an open-source, enterprise-focused design system centered on inclusion.Read 2 Oct 2026 · core.clarity.design
License
The code is licensed under the MIT License.Read 2 Oct 2026 · core.clarity.design
Accessibility
Clarity follows WCAG 2.1 AA guidelines and has a dedicated accessibility team.Read 2 Oct 2026 · core.clarity.design
Accessibility testing
Clarity tests accessibility across multiple tools, screen-reader and browser combinations against the WCAG 2.1 specification.Read 2 Oct 2026 · core.clarity.design
Community support
Questions are handled through GitHub Discussions, while issues and feature requests are tracked in GitHub Issues.Read 2 Oct 2026 · core.clarity.design
Components
The toolkit includes 30+ components and over 200 icons.Read 2 Oct 2026 · core.clarity.design
Core installation limit
Clarity Core currently requires a JavaScript bundler to import its dependencies.Read 2 Oct 2026 · core.clarity.design
Design resources
Clarity provides Figma themes, icons, color libraries, fonts and downloadable SVG icon assets.Read 2 Oct 2026 · core.clarity.design
Framework support
Clarity supports Angular, React and Vue through its Core components.Read 2 Oct 2026 · core.clarity.design
Origin
VMware announced Clarity 1.0 on December 4, 2018.Read 2 Oct 2026 · blogs.vmware.com
Performance
The datagrid component supports more than a dozen features and thousands of data entries.Read 2 Oct 2026 · core.clarity.design
React integration
React users must install the additional @cds/react wrapper package because React does not fully interoperate with custom elements.Read 2 Oct 2026 · core.clarity.design
Release support
Each major release is actively supported for six months after the next major release becomes available.Read 2 Oct 2026 · core.clarity.design
Supported tools
Clarity Core is compatible with Webpack, RollupJS, Parcel and most framework CLIs.Read 2 Oct 2026 · core.clarity.design
Web components
Clarity Core provides reusable Web Components that work with any JavaScript framework or with no framework.Read 2 Oct 2026 · core.clarity.design

Plans and prices

Open-source Clarity Design System Free MIT License · no paid tiers stated Read 2 Oct 2026 · core.clarity.design

Every Clarity Design System plan and price →

Strong points and limits

Strong points

  • More than 30 components and over 200 icons.
  • Works with Angular, React, Vue or no framework.
  • Follows WCAG 2.1 AA guidelines.
  • MIT-licensed code, listed as free.
  • Datagrid supports thousands of data entries.

Limits

  • Clarity Core requires a JavaScript bundler.
  • React projects need the additional @cds/react wrapper.
  • Major releases receive active support for six months after the next release.

Who it suits

Clarity suits teams building enterprise interfaces who want reusable components and design resources across common JavaScript frameworks. It is also relevant to teams prioritizing accessibility guidance and WCAG 2.1 AA practices.

Verdict

Clarity brings design assets, reusable components and accessibility practices into one system. Account for the bundler requirement and the extra React wrapper when planning an implementation.

Where Specifiction places it

Alternatives to Clarity Design SystemAll alternatives →