- Home
- UI Kit Libraries
- Clarity Design System
Clarity Design System
What it is
Clarity Design System is an open-source toolkit for enterprise-focused interface design, with inclusion at its center. It provides Figma themes, icons, color libraries, fonts, and downloadable SVG assets, alongside more than 30 components and over 200 icons. Clarity Core supplies reusable Web Components for Angular, React, Vue, other JavaScript frameworks, or projects without a framework. It works 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 tests accessibility with different tools, screen readers, and browser combinations. Its code is licensed under MIT, with questions handled through GitHub Discussions and issues or feature requests 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. The open-source system is free, with no paid tiers stated.
For and against
For
- Includes more than 30 components and over 200 icons.
- Core Web Components work with or without a framework.
- Follows WCAG 2.1 AA guidelines.
- Code is licensed under MIT.
- Provides Figma resources and downloadable SVG icons.
Against
- Clarity Core requires a JavaScript bundler.
- React projects need the separate @cds/react wrapper.
- Major releases are actively supported for six months after the next release.
The verdict
Clarity offers design resources and reusable components under an MIT license, with documented accessibility practices. Check the bundler requirement and React integration needs before adopting Clarity Core.
Who it suits
Clarity suits teams building enterprise interfaces who want reusable components, design resources, and accessibility guidance. Developers should note its bundler requirement and React’s additional wrapper package.
Plans and prices
Open-source Clarity Design System
MIT License · no paid tiers stated
Read 2 Oct 2026 · core.clarity.design
On the record
- Accessibility
- Clarity follows WCAG 2.1 AA guidelines and has a dedicated accessibility team.core.clarity.design · read 2 Oct 2026
- Accessibility testing
- Clarity tests accessibility across multiple tools, screen-reader and browser combinations against the WCAG 2.1 specification.core.clarity.design · read 2 Oct 2026
- Community support
- Questions are handled through GitHub Discussions, while issues and feature requests are tracked in GitHub Issues.core.clarity.design · read 2 Oct 2026
- Components
- The toolkit includes 30+ components and over 200 icons.core.clarity.design · read 2 Oct 2026
- Core installation limit
- Clarity Core currently requires a JavaScript bundler to import its dependencies.core.clarity.design · read 2 Oct 2026
- Design resources
- Clarity provides Figma themes, icons, color libraries, fonts and downloadable SVG icon assets.core.clarity.design · read 2 Oct 2026
- Framework support
- Clarity supports Angular, React and Vue through its Core components.core.clarity.design · read 2 Oct 2026
- License
- The code is licensed under the MIT License.core.clarity.design · read 2 Oct 2026
- Origin
- VMware announced Clarity 1.0 on December 4, 2018.blogs.vmware.com · read 2 Oct 2026
- Performance
- The datagrid component supports more than a dozen features and thousands of data entries.core.clarity.design · read 2 Oct 2026
- Purpose
- Clarity is an open-source, enterprise-focused design system centered on inclusion.core.clarity.design · read 2 Oct 2026
- React integration
- React users must install the additional @cds/react wrapper package because React does not fully interoperate with custom elements.core.clarity.design · read 2 Oct 2026
- Release support
- Each major release is actively supported for six months after the next major release becomes available.core.clarity.design · read 2 Oct 2026
- Supported tools
- Clarity Core is compatible with Webpack, RollupJS, Parcel and most framework CLIs.core.clarity.design · read 2 Oct 2026
- Web components
- Clarity Core provides reusable Web Components that work with any JavaScript framework or with no framework.core.clarity.design · read 2 Oct 2026
