Clarity Design System
Clarity Design System is an open-source toolkit for enterprise-focused interface design, with inclusion at its center.
What Clarity Design System 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 icon files, along with more than 30 components and over 200 icons. Clarity Core offers 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 separate @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 across tools, browsers, and screen-reader combinations. Its code is licensed under MIT, and questions and issue reports are handled through GitHub Discussions and GitHub Issues. Each major release is actively supported for six months after the next major release appears. Clarity Core currently requires a JavaScript bundler to import its dependencies. The open-source system is listed as free, with no paid tiers stated.
Good
- Includes more than 30 components and over 200 icons.
- Supports Angular, React, and Vue.
- Follows WCAG 2.1 AA guidelines.
- Code is licensed under MIT.
- Provides Figma themes and downloadable SVG icons.
Watch out
- Clarity Core requires a JavaScript bundler.
- React requires the additional @cds/react wrapper.
- Major releases receive six months of active support after the next release.
Who it suits
Clarity suits design and development teams building web interfaces that need reusable components and accessibility guidance. It is especially relevant to teams working with Angular, React, Vue, or Web Components.
Verdict
Clarity offers design assets and reusable web components under an MIT license, with a stated accessibility focus. React users need an extra wrapper, and Clarity Core currently requires a bundler.
Plans and prices
From Clarity Design System's own pricing page, checked 2 Oct 2026.
| Plan | Price | What it gives you |
|---|---|---|
| Open-source Clarity Design System | Free | MIT License · no paid tiers stated |
The facts
Each one read from Clarity Design System's own pages, with the date it was checked.
What it does
- Accessibility
- Clarity follows WCAG 2.1 AA guidelines and has a dedicated accessibility team.checked 2 Oct 2026
- Accessibility testing
- Clarity tests accessibility across multiple tools, screen-reader and browser combinations against the WCAG 2.1 specification.checked 2 Oct 2026
- Community support
- Questions are handled through GitHub Discussions, while issues and feature requests are tracked in GitHub Issues.checked 2 Oct 2026
- Components
- The toolkit includes 30+ components and over 200 icons.checked 2 Oct 2026
- Core installation limit
- Clarity Core currently requires a JavaScript bundler to import its dependencies.checked 2 Oct 2026
- Design resources
- Clarity provides Figma themes, icons, color libraries, fonts and downloadable SVG icon assets.checked 2 Oct 2026
- Framework support
- Clarity supports Angular, React and Vue through its Core components.checked 2 Oct 2026
- License
- The code is licensed under the MIT License.checked 2 Oct 2026
- Origin
- VMware announced Clarity 1.0 on December 4, 2018.checked 2 Oct 2026
- Performance
- The datagrid component supports more than a dozen features and thousands of data entries.checked 2 Oct 2026
- Purpose
- Clarity is an open-source, enterprise-focused design system centered on inclusion.checked 2 Oct 2026
- React integration
- React users must install the additional @cds/react wrapper package because React does not fully interoperate with custom elements.checked 2 Oct 2026
- Release support
- Each major release is actively supported for six months after the next major release becomes available.checked 2 Oct 2026
- Supported tools
- Clarity Core is compatible with Webpack, RollupJS, Parcel and most framework CLIs.checked 2 Oct 2026
- Web components
- Clarity Core provides reusable Web Components that work with any JavaScript framework or with no framework.checked 2 Oct 2026
Alternatives to Clarity Design System
- 1
Figma Wireframe Kit
Free planAndroidiOSWebAPI8.0From $3 a month - 2
Ant Design Icons
Free planAndroidiOSWeb7.1Free plan - 3
Shopify
Web7.1From $29 a month - 4
GitHub Primer
Free planOpen sourceWebAPI7.0Free plan - 5
MUI
Free planWeb6.8From $299 a year - 6
Shadcn Studio Figma UI Kit
Free planWeb6.7$99 one-time